如何在 React JS 中的两个页面之间导航

Question

我正在使用 React-Router-Dom 在 create-react-app dapp 中的两个 javascript 元素之间导航，但是当我使用它时，它会将元素加载到页面顶部，并将页面添加到链接的末尾（localhost/page ).

我的目标是在单击具有新背景和样式的链接按钮时将页面重新加载到新页面（已为该页面完成）

App.js代码

<Router>
  <s.Screen>
    <Navbar />
    <Routes>
      <Route path="/MyPandas" element={MyPandas} exact></Route>
    </Routes>
          
    /*
      Rest of Code
    */
</Router>

我的其他页面只是包裹在一个片段组件中

<Fragment>
  /*
    Code
  */
</Fragment>

 

    

Answer 1

在您的路线中使用 exact，例如： <Route path='/products' exact>

Answer 2

假设您的链接工作正常，如果地址栏中的 URL 更新为"/MyPandas" ，它们似乎是正确的。

问题是element属性没有传递正确的值。 react-router-dom@6 Route组件的element属性采用ReactNode ，又名 JSX，而不是对 React 组件的引用。 传递<MyPandas />而不是MyPandas 。

<Route path="/MyPandas" element={<MyPandas />} />

注意：不需要exact道具。 它不仅不存在于 RRDv6 Route组件 API 中，而且所有路由现在始终完全匹配。