How to set specific path in react-router-dom?

Question

I would to for the URL in the adress bar to show "/login" when im in the login page.

// App.js
<Routes>
    {isLoggedIn ? (
        <Route path="/" element={<Root onLogout={handleLogout} />}>
            <Route index element={<Topics />} />
            <Route path="employees" element={<EmployeeList />} />
            <Route path="employees/create" element={<RegisterEmployee />} />
            <Route path="employees/:employeeId" element={<EditEmployee />} />
            <Route path="user-entry" element={<Register />} />
            <Route path="dashboard" element={<Dashboard />} />
        </Route>
      ) : (
        <Route path="/" element={<Login onLogin={handleLogin} />} />
     )}
</Routes>

// index.js
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      {/* Using HashRouter(which introduces "#" in the URL) because when BrowserRouter is used, and the any page is refreshed, the app throws an error(Cannot Get) */}
      <Router>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById("app")
);

The above is working fine with exception that I need the path to be "/login", and when i change it, the page is blank, nothing is mounted. The other paths are supose to be like the above, for the exception of the login. Could anyone shed some light?

score 1 · Answer 1 · answered Aug 06 '23 at 11:57

To show "/login" in the address bar you must create a route for "/login" with <Login onLogin={handleLogin}/> element.

Then you can use useNavigate() hook from react-router to redirect the user to "/login" if the user is not logged in, do this in a side effect (useEffect).

There are many ways to implement this, it all depends on your requirements. You must also consider protecting your routes from unauthenticated users.

score 0 · Answer 2 · answered Aug 06 '23 at 11:52

0

The best practice would be to use Navigate component from "react-router-dom"

{!user && (
      <Navigate to="/login" replace={true} />
    )}

answered Aug 06 '23 at 11:52

Rayon

36,219
4
49
76

Thank you for your time. I tried but still did not work. – raio Aug 06 '23 at 12:20

score 0 · Answer 3 · answered Aug 06 '23 at 14:01

In App.js :

  const location = useLocation();
  return !location.pathname.startsWith('/login') ? (  // startWith OR includes
    <>
      {
        isLoggedIn ? 
        (
          <Routes>
            <Route path="/" element={<Root onLogout={handleLogout} />}>
              <Route index element={<Topics />} />
              <Route path="employees" element={<EmployeeList />} />
              <Route path="employees/create" element={<RegisterEmployee />} />
              <Route path="employees/:employeeId" element={<EditEmployee />} />
              <Route path="user-entry" element={<Register />} />
              <Route path="dashboard" element={<Dashboard />} />
            </Route>
          </Routes>
        ) : (<Navigate to="/login"/>)
      }    
    </>
  ) : (
    <>
      { !isLoggedIn ? (
          <Routes>
              <Route path="/login" element={<Login onLogin={handleLogin} />} />    
          </Routes>
        ) : (<Navigate to="/"/>)
      }
    </>
  );

How to set specific path in react-router-dom?

3 Answers3