No routes matched location "/login"

Question

all import statements

    import React, { useState } from 'react';
    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    import Dashboard from './components/Dashboard/Dashboard';
    import Preferences from './components/Preferences/Preferences';
    import Login from './components/Login/Login';

    import useToken from "./useToken";




  function App() {

token function for blocking pages before logging in

    const { token, setToken } = useToken();

login Route

 if (!token) {



    return( 
  <Router>
    <Routes>
      <Route path="/login">
        <Route
          index
          element={<Login setToken={setToken}
          />}
        />
      </Route>

    </Routes>
  </Router>
);
      }

after login routes return ( <Route path="/dashboard" element={}> <Route path="/preferences" element={}> ); } export default App;

What am i doing wrong ?

Answer 1

Don't conditionally render the routes, just render them normally. If you need to prevent access to certain routes do this with a specialized component wrapper or layout route.

return( 
  <Router>
    <Routes>
      <Route path="/login">
        <Route index element={<Login setToken={setToken} />} />
      </Route>
      <Route path="/dashboard" element={...} /> 
      <Route path="/preferences" element={...} />
    </Routes>
  </Router>
);

Example using conditional redirect on the token.

import { Outlet, Navigate, useLocation } from 'react-router-dom';

const AuthLayout = () => {
  const { token } = useToken();
  const location = useLocation();
  return token
    ? <Outlet />
    : <Navigate to="/login" replace state={{ from: location }} />
}

const AnonymousLayout = () => {
  const { token } = useToken();
  return token
    ? <Navigate to="/" replace />
    : <Outlet />
}

App

return( 
  <Router>
    <Routes>
      <Route element={<AnonymousLayout />}>
        <Route path="/login" element={<Login setToken={setToken} />} />
      </Route>
      <Route element={<AuthLayout />}>
        <Route path="/dashboard" element={...} /> 
        <Route path="/preferences" element={...} />
      </Route>
    </Routes>
  </Router>
);