How to navigate between two pages in React JS

user_17969493 0
Viewed 104

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>
react-router-dom react-router reactjs javascript
2 Answers

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

user_162604420

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.

user_86908570
Related