How to navigate between two pages in React JS-CodePudding

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>

CodePudding user response：

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, a.k.a. 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.

CodePudding user response：

use exact in your Routes e.g : <Route path='/products' exact>