Question

0

63

Vistas

React routing using react-router-dom v.6 doesn't show anything

so I'm trying to create routing for my react.js app by using react-router v.6. I already tried to do changes for the v.6 but for some reason my app didn't show anything, can anyone help me ?

So Navigation.js file is for Routing, Header.js filled with button for changing route and App.js is used to display them.

App.js:

    <div>
      <Header/>
      <Outlet/>
    </div>

Header.js:

<>
  <Link to="/">Home</Link>
  <Link to="/Productlist">Product</Link>
  <Link to="/Contact">Contact Us</Link>
</>

Navigation.js:

<>
    <Routes>
        <Route exact path="/" element={<Home/>}>
            <Route exact path="ProductList" element={<Product/>}/>
            <Route exact path="ContactUs" element={<Contact/>}/>
        </Route>
    </Routes>
</>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T04:32:01.584Z

I don't know if this will solve your problem but first you can start by replacing your Navigation.js by :

<Routes>
    <Route path="/" element={<Home/>} />
    <Route path="ProductList" element={<Product/>}/>
    <Route path="ContactUs" element={<Contact/>}/>
</Routes>

In this case you don't need nested routes.

Then, I don't think it's a good idea to use capitalize letter in path.