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

Question

I am using React-Router-Dom to navigate between two javascript elements in a create-react-app dapp but when I use it loads the elements on top of the page and just adds the page to the end of the link (localhost/page).

My goal is to have the page reload to the new page on click of the link button with a new background and styling (already done for that page)

App.js Code

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

My other page is just wrapped in a Fragment Component

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

 

    

Answer 1

use exact in your Routes eg: <Route path='/products' exact>

Answer 2

Assuming your links are working correctly, and it seems they are if the URL in the address bar updates to "/MyPandas" .

The issue is that the element prop isn't passed a correct value. react-router-dom@6 Route component's element prop takes a ReactNode , aka JSX, not a reference to a React component. Pass <MyPandas /> instead of MyPandas .

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

Note: There's no need for the exact prop. Not only does it not exist in the RRDv6 Route component API, but all routes are now always exactly matched.