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>
</>
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.