React路由器正带我到同一个页面

Question

我有一个导航栏，里面有主页和链接，我试着制作一个路由器，当我点击“关于链接”时，它会转到“页面”，而当我点击“主页”链接时，我就会“回家”，但是我不知道为什么我要么在家里点击，要么它会带我去主页。

这是App.js文件：

<Router>
<Box>
<Navbar />
<Home />
<Routes>
<Route exact path="/" component={Home}/>
<Route path="/about" component={AboutUs}/>
</Routes>
</Box>
</Router>

这是Home.js文件：

function Home() {
  return (
    <div>
    <FirstSection />
    <SecondSection />
    <ThirdSection />
    </div>
  )
}

这是关于文件的：

function AboutUs() {
  return (
    <div>AboutUs</div>
  )
}

最后，这是导航栏：

<a href="/">
            <MenuButton>
                Home
            </MenuButton>
            </a>
        </Menu>
        <Menu>
        <a href="/about">
            <MenuButton>
                About us 
            </MenuButton>
            </a>

Answer 1

试一试：

 <Menu>
<Lint to="/">
  <MenuButton>
     Home
   </MenuButton>
 </Lint >
   </Menu>
   <Menu>
      <Link to="/about">
        <MenuButton>
           About us 
        </MenuButton>
      </Link >
   </Menu>

如果您的牲畜路由器版本为6，您应该这样做：

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home/>}>
        <Route path="/about" element={<AboutUs/>}>
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>

Answer 2

尝试在<Link />组件上使用<NavBar />组件而不是<a>标记。

因此，您的代码应该类似于

<Menu>
    <Link to="/home">
        <MenuButton>
            Home
        </MenuButton>
    </Link>
</Menu>
<Menu>
     <Link to="/about">
         <MenuButton>
              About us 
         </MenuButton>
      </Link>
</Menu>

有关<Link />组件的更多信息，您可以通过react路由器文档阅读。