Реагировать, ссылка на компонент не загружается, пока страница не обновится.

Question

Реагируйте, ссылка на компонент не загружается, пока страница не обновится. Моя ссылка для условий использования не будет загружаться, пока страница не будет обновлена. Просмотрите видео ниже. 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> и внутри компонента «Условия и условия»).

Вы можете попробовать использовать 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>
  //...