React, Link to component wont load until page is refreshed

Question

React, Link to component wont load until page is refreshed My Link for terms and conditions won't load until the page is refreshed view the video below here. https://youtu.be/2QumWBRXiuM

Here is the Footer.js code The link to the page should be on line 44 I have it in a link tag than a list (li) tag.

import React from "react";
// import { Button } from "./Button";
import "./Footer.css";
import { Text, Div, Button, Row, Col, Container, Image } from "atomize";
import logo from "../logo/tryb_logo_medium.png";
import { Link } from "react-router-dom";
import TwitterIcon from '@material-ui/icons/Twitter';
import FacebookIcon from '@material-ui/icons/Facebook';
import InstagramIcon from '@material-ui/icons/Instagram';
import { Icon } from "@material-ui/core";

function Footer() {
  return (
    <div className="main-footer" id="onTop">
      <Container>
        <Row d="flex">
          {/* Col 1 
          <div className="col-sm">
            <section className="footer-subscription">
              <p className="footer-subscription-heading">Join the Tryb</p>

              <div className="input-areas">
                <form>
                  <input
                    type="email"
                    name="email"
                    placeholder="Your email"
                    className="footer-input"
                  />
                </form>
                <p className="footer-subscription-text">
                  Unsubscribe at any time
                </p>
             <Button>Subscribe</Button> 
              </div>
            </section>
          </div> *}
          {/* Col 2 */}
          <Col textColor="white" size={{ xs: '12', md: '4' }}>
            <div text-align="center" p="1rem">
              <h4>Need Help?</h4>
              <ul className="list-unstyled">
                <a href="mailto:[email protected]"><li>Contact Us</li></a>
                <Link to="/termsandconditions">
                <li>Terms &amp; Conditions</li>
                </Link>
              </ul>
            </div>
          </Col>

       
          {/* Col 4 */}
          <Col size={{ xs: '12', md: '4' }} align="center">
            <div p="1rem">
           
              <h4>Social</h4>
              <ul className="list-unstyled">
                <a href="https://www.facebook.com/trybprints" target="_blank" ><FacebookIcon/></a>
                <a href="https://www.instagram.com/tryb_prints/" target="_blank" ><InstagramIcon/></a>
                <a href="https://twitter.com/PrintsTryb" target="_blank" ><TwitterIcon/></a>
              </ul>
            </div>
          </Col>

             {/* Col 3 */}
             <Col size={{ xs: '12', md: '4' }}>
            <div p="1rem">
              <ul className="list-unstyled">
                <li> <img
                    src={logo}
                    alt="tryb logo"
                    width="300px"
                    className="d-inline-block align-top"
                /></li>
                <li></li>
              </ul>
            </div>
          </Col>
          
        </Row>
      </Container>
      <hr />
      <div className="copyright">
         Copyright &copy; Tryb Prints {new Date().getFullYear()}
      </div>
    </div>
  );
};

export default Footer;

any help at all is greatly appreciated thanks

Answer 1

I can't recreate the problem, and would need to see more code to be more help (would like to see inside the <Switch>...</Switch> and inside the "TermsAndConditions" component).

You can maybe try to use useHistory? Something like this:

import { Link, useHistory } from "react-router-dom";
// ...

function Footer() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/termsandconditions");
  }
  
  return (
  //...
    // Remove the <Link> here
    <a onClick={handleClick}>
      <li>Terms &amp; Conditions</li>
    </a>
  //...