React router dom v6 redirect to home when directly enter the URL

Question

I'm trying to build up private and public routes for my react website.
I have a problem: when I try to go directly with the link with the path name, it'll redirect to the home page.
For example, I have a private route with a path name dashboard when direct enter the link: https://localhost:3000/dashboard will still redirect to https://localhost:3000/. I'm guessing it is because of the PrivateRoutes() function, which will always redirect the path to the home page but not sure how to modify it.

App.js

const App = () => {
  const {
    state: { isAuthenticated },
  } = AuthContext();
  function PrivateRoutes() {
    return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
  }

  function PublicRoutes() {
    return isAuthenticated ? <Navigate to="/home" /> : <Outlet />;
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PrivateRoutes />}>
          <Route path="/*" element={<Layout />} />
        </Route>

        <Route path="*" element={<Error />} />
        <Route path="login" element={<PublicRoutes />}>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

Layout.js

const Layout = () => {
  return (
    <Box>
      <Header />

      <Routes>
        <Route index element={<Home />} />
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="transaction" element={<Transaction />} />
        <Route path='/*' element={<Navigate to="/" />} />
      </Routes>

      <Footer />
    </Box>
  );
};

Is this a complete [mcve]? What is `isAuthenticated` in the code? FYI, you'll want to move your route protector component declarations ***outside*** the `App` component so they aren't redeclared each render cycle and remount their sub-ReactTrees. — Drew Reese, Dec 21 '22 at 05:56
Hi @DrewReese the `isAuthenticated` is a variable to check if the user is login/logout. Thanks for your guidance! — Hazel, Dec 21 '22 at 06:12
I see, thanks for the information. Does this help answer your question? https://stackoverflow.com/a/66289280/8690857 The basic gist is that I think the initial `isAuthenticated` value is masking the unauthenticated state, so when you manually enter a URL the entire React app is reloaded and the initial state is used before any authentication confirmation occurs. — Drew Reese, Dec 21 '22 at 06:17

MohsinRahman · Answer 1 · 2022-12-21T05:56:41.947

-1

<Routes>
     <Route path="/" element={<Home/>} />                                         
     <Route path="/login" element={<Login/>} />   
    <Route path="/dashboard"element={
      token? <Admin/> :<Login/>
      } />
                          
</Routes>

I did it like this Try it instead of getting that in extra function

edited Dec 21 '22 at 05:56

answered Dec 21 '22 at 05:55

MohsinRahman

1
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 22 '22 at 10:41

React router dom v6 redirect to home when directly enter the URL

1 Answers1