当点击 React 按钮时，url/route 会发生变化。但是与 url/route 关联的内容不会呈现

Question

我是新手，我有很多视频，但我找不到我的问题。当我单击主页上的联系我按钮时，我想打开联系我部分。当我单击联系我按钮时，它会更改 URL 中的路由，但会打开页面。 当我尝试通过单击导航栏中的链接打开同一页面时，它可以工作。

我在发布问题时正在清理以保持可读性。

这是我的 App.js

import React from 'react';
import Nav from './components/Nav';
// Import Pages
import AboutMe from './pages/AboutMe';
import MyWork from './pages/MyWork';
import ContactMe from './pages/ContactMe';
// Router
import {BrowserRouter, Route, Switch, useLocation } from "react-router-dom";
function App() {
  const location = useLocation();
  return (
    <div className="App">
      <GlobalStyle />
      <Nav />
      <BrowserRouter>
        <Switch location={location} key={location.pathname}>
          <Route path="/" exact>
            <AboutMe />
          </Route>
          <Route path="/work" exact>
            <MyWork />
          </Route>
          <Route path="/contact" exact>
            <ContactMe />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

这是我的 AboutSection。 在我的 about 部分中，当我点击我的按钮时，它会进入 /contact 但没有打开页面，但是当我在点击导航栏中的链接时尝试打开相同的路线时，它会打开链接。

import React from "react";
import { Link } from "react-router-dom";
//Images

const AboutSection = () => {
  return (
    <About>
      <Description>
        {/*This is the button */}
        <Link to="/contact">
          <motion.button variants={fade}>
            Contact Me
          </motion.button>
        </Link>
      </Description>
      <Image>
        <motion.img variants={photoAnim} src={homeImg1} alt="camera guy" />
      </Image>
      <Wave />
    </About>
  );
};

const Hide = styled.div`
  overflow: hidden;
`;

export default AboutSection;

我的 Nav.js 代码

import React from "react";
import { Link, useHistory } from "react-router-dom";
const Nav = () => {
  return (
      <StyledNav>
        <h1>
          <Link id="logo" to="/">
            Nitish Poonia
          </Link>
        </h1>
        <ul>
          <li>
            <Link to="/contact">Contact Me</Link>
          </li>
        </ul>
      </StyledNav>
  );
};
export default Nav;

我的联系方式

import React from "react";
import styled from "styled-components";
//Animation
import { motion } from "framer-motion";
import { pageAnimation, titleAnim } from "../animation";

const ContactUs = () => {
  return (
    <ContactStyle>
      <Title>
        <Hide>
          <motion.h2 variants={titleAnim}>Get in touch.</motion.h2>
        </Hide>
        <div className="line2"></div>
      </Title>
      <div>
        <Hide>
          <Social variants={titleAnim}>
            <Circle />
            <h2>Socials</h2>
          </Social>
        </Hide>
        <Hide>
          <Social variants={titleAnim}>
            <Circle />
            <h2>Send me a message</h2>
          </Social>
        </Hide>
        <Hide>
          <Social variants={titleAnim}>
            <Circle />
            <h2>Drop an email.</h2>
          </Social>
        </Hide>
      </div>
    </ContactStyle>
  );
};



export default ContactUs;

Answer 1

我认为您可以做一些改变来解决这些问题。在下面记下它们。

• Switch 组件不应传递任何props，您无需在此处使用useLocation 获取location 并将其传递到那里，key 也一样。参考React Router Switch Link
• 为了安全起见，您能否将路线的顺序更改为如下所示。我们将/ 即基本路线放在最后，这样它也可以作为后备。

<BrowserRouter>
  <Switch>
     <Route path="/work" exact>
       <MyWork />
     </Route>
     <Route path="/contact" exact>
       <ContactMe />
     </Route>
     <Route path="/">
       <AboutMe />
     </Route>
  </Switch>
</BrowserRouter>