React, Link to component wont load until page is refreshed - reactjs

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">
<li>Contact Us</li>
<Link to="/termsandconditions">
<li>Terms & 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 © 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 & Conditions</li>
</a>
//...