Redirect to 404 not found page while any of the paths get unmatched?-CodePudding

 <Routes>
  {!userlog ? (
    <Route path="/" element={<AuthLayout />}>
      <Route index element={<Login />} />
      <Route path="/login" element={<Login />} />
      <Route path="/signin" element={<Login />} />
      <Route path="/forgotpassword" element={<ForgotPassword />} />
      <Route path="/changepassword" element={<ChangePassword />} />
    </Route>
  ) : userlog?.user_type===1?(
  <Route path="/" element={<HomeLayout />}>
    <Route index element={<HomePage />} />
    <Route path="viewproduct/:id" element={<ViewPage />} />
    <Route path="cartlist" element={<CartList />} />
  </Route>
  ):
  <Route path="/" element={<AdminLayout />}>
    <Route index element={<Dashboard />} />
    <Route path="listproducts" element={<ProductsList />} />
  </Route> 
  } 
  <Route path="*" element={<Navigate to={"/"} />} />
</Routes>

What i want,
Scenario 1(user not logged in): if user try to navigate "/cartlist" it's redirect to the login page. If user try navigate something not an part of route path's want to navigate 404 not found page.

Scenario 2(user logged in): if user try to navigate "/login" it's redirect to the dashboard page. If user try navigate something not an part of route path's want to navigate 404 not found page.

Now what i get is,
User try to navigate any other routes it's navigate to "/" page.

NOTE: I don't want to put private route for every Route's and Also i want routing path like this only..

Thanks in advance....

CodePudding user response：

The reason it always resolves to "/" is because it will choose the first route which matches the given pattern, even if it is a partial match. Since all of your routes begin with "/" eg. "/login" etc it always matches "/".

You can prevent this with the "exact" parameter:

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

CodePudding user response：

Ofcourse due to this line, it will go to "/":

<Route path="*" element={<Navigate to={"/"} />} />

With the new react-router v6 you can use this by changing:

// 404 route
<Route path="*" element={<NotFoundPage />} />

NotFoundPage will be your component to tell users that page is not found.

Also, for these, i think you need to put a forward slash / before pathname

<Route path="/viewproduct/:id" element={<ViewPage />} />
<Route path="/cartlist" element={<CartList />} />
<Route path="/listproducts" element={<ProductsList />} />