React，链接到组件直到页面刷新才会加载

Question

React，在页面刷新之前不会加载到组件的链接我的条款和条件链接在页面刷新之后才会加载查看下面的视频。https://youtu.be/2QumWBRXiuM

这是Footer.js代码页面的链接应该在第44行。我把它放在链接标签中，而不是列表(li(标签中。

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:[e-mail]"><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;

非常感谢提供的任何帮助

Answer 1

我无法重新创建问题，需要查看更多代码才能获得更多帮助(希望查看<Switch>...</Switch>和"TermsAndConditions"组件内部(。

你也许可以尝试使用useHistory？类似这样的东西：

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>
//...