refreshing / maunally typing url gives blank page - React router dom 6

Question

all pages links work fine when I click on something to navigate i.e tag it redirect me to page I want. but on page when I click reload. it gives me blank page. here are my routers

react router @6 MERN stack - reactjs

index.js

<Router> 
  <Header/>
  <Routes>
    <Route path="/product/:id" element={<Product />} />
    <Route path="/products/:category" element={<AllProducts />} />
    <Route path="/cart" element={<Cart />} />
    <Route path="/profile" element={<Profile />} />
    <Route path="/admin" element={<AdminPanel />} />
    <Route path="/auth" element={<Auth />} />
    <Route path="/" element={<Home />} />
   
  </Routes>
  <Footer />
</Router> 

 

for eg when I click on a button

<Link to='/cart' > <Button> go to cart </Button></Link>

it redirect me to desire page . and everything works fine.

• but when I reload page . it gives black page. and even If I copy url and paste it in new tab it give blank page.

check out code on gitHub

Answer 1

use exact keyword with route might be your router is confused in picking the right url:

 <Route exact path="/" element={<Home />} />