Question 233971 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – "No routes matched location" error using react-router-dom v6

My App component without the imports:

function App() {
  const { token, login, logout, userId, userEmail } = useAuth();

  let routes;

  if (token) {
    routes = (
      <>
        <Route path='/' element={<Home />} />
        <Route path='profile' element={<Profile />} />
        <Route path='organizations' element={<Organizations />} />
        <Route path='organizations/events' element={<EventsCollection />} />
        <Route path='event/:eventId' element={<Event />} />
        <Route path='event/:eventId/order' element={<Order />} />
        <Route path='dashboard/:eventId' element={<Dashboard />} />
        <Route path='dashboard/:eventId/budget' element={<Budget />} />
        <Route path='dashboard/:eventId/contacts' element={<Contacts />} />
        <Route path='dashboard/:eventId/orders' element={<Orders />} />
        <Route path='dashboard/:eventId/tasks' element={<Tasks />} />
        <Route
          path='dashboard/:eventId/organization'
          element={<OrganizationDetails />}
        />
        <Route path='dashboard/:eventId/team' element={<Team />} />
        <Route path='dashboard/:eventId/event' element={<EventDetails />} />
        {/* <Route path='*' element={<Navigate to='/' replace />} /> */}
      </>
    );
  } else {
    routes = (
      <>
        <Route path='/' element={<Home />} />
        <Route path='login' element={<Login />} />
        <Route path='register' element={<Register />} />
        <Route path='event/:eventId' element={<Event />} />
        <Route path='event/:eventId/order' element={<Order />} />
        {/* <Route path='*' element={<Navigate to='/login' replace />} /> */}
      </>
    );
  }

  return (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      <AuthContext.Provider
        value={{
          isLoggedIn: !!token,
          token: token,
          login: login,
          logout: logout,
          userId: userId,
          userEmail: userEmail,
        }}
      >
        <BrowserRouter>
          <Routes>{routes}</Routes>
        </BrowserRouter>
      </AuthContext.Provider>
    </ThemeProvider>
  );
}

export default App;

on "/profile" and "/organizations" I get a warning: "No routes matched location "/profile"" the page still loads and works fine but if I add <Route path='*' element={<Navigate to='/' replace />} /> at the end of the routes and refresh the Profile page or the Organizations page I will be redirected for whatever reason. I cannot find the answer.

I tried nesting the routes but I cannot get it to work and I reorganized the paths but it still doesn’t work like it is supposed to.

Tags:

2

Answers


  1. 0

    It looks like you have a structure using the Routes component with different routes based on whether the user is authenticated (token exists) or not. The issue you’re facing might be related to the order of your route declarations and the usage of nested routes.

    Here’s a possible reorganization of your routes:

    function App() {
    const { token, login, logout, userId, userEmail } = useAuth();
    return (
        <ThemeProvider theme={lightTheme}>
        <CssBaseline />
        <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                login: login,
                logout: logout,
                userId: userId,
                userEmail: userEmail,
            }}
        >
        <BrowserRouter>
        <Routes>
            <Route path='/' element={<Home />} />
            {token ? (
                <LoggedInRoutes />
            ) : (
                <NotLoggedInRoutes />
            )}
            <Route path='*' element={<NotFound />} />
        </Routes>
        </BrowserRouter>
        </AuthContext.Provider>
        </ThemeProvider>
    );
}

function LoggedInRoutes() {
  return (
      <>
          <Route path='profile' element={<Profile />} />
          <Route path='organizations' element={<Organizations />} />
          {/* ... other logged in routes ... */}
      </>
  );
}

function NotLoggedInRoutes() {
    return (
        <>
            <Route path='login' element={<Login />} />
            <Route path='register' element={<Register />} />
            {/* ... other not logged in routes ... */}
        </>
    );
}

function NotFound() {
    return <div>Page not found</div>;
}
export default App;
    Login or Signup to reply.
  2. 0

    Depending on authentication status you are potentially not rendering some routes that you are trying to navigate to, e.g. "/profile", "/organizations*", and "/dashboard*" routes while a user is not authenticated. When you tried fixing this warning by rendering "catch-all" routes that redirect, the issue is now the user is being redirected prior to the authentication status "settling" to a known "state" of "authenticated" or "unauthenticated".

    My suggestion is to not conditionally render routes such that they are always rendered and reachable, and to conditionally allow access to protected route content via a protected layout route component.

    Create a ProtectedRoutes component that checks if a user is authenticated and conditionally render an Outlet component if they are, otherwise render a redirect to the login endpoint. I’m making the assumption that the initial token state value is undefined and is later updated to a defined value, e.g. null or a string value.

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

const ProtectedRoutes = () => {
  const { token } = useAuth();

  if (token === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return token
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

    Similarly create an AnonymousRoutes component that does the inverse of the ProtectedRoutes component. This will be used to protect routes you don’t want authenticated users to be able to access, e.g. a login/registration route.

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

const AnonymousRoutes = () => {
  const { token } = useAuth();

  if (token === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  return token
    ? <Navigate to="/" replace />
    : <Outlet />;
};

    Next, merge all the routes you are rendering into a single configuration, using the appropriate route protection layout route components.

    function App() {
  const { token, ...rest } = useAuth();

  return (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      <AuthContext.Provider
        value={{
          isLoggedIn: !!token,
          token,
          ...rest
        }}
      >
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/event/:eventId">
              <Route index element={<Event />} />
              <Route path="order" element={<Order />} />
            </Route>
            <Route path='*' element={<Navigate to='/' replace />} />

            <Route element={<ProtectedRoutes />}>
              <Route path="profile" element={<Profile />} />
              <Route path="organizations">
                <Route index element={<Organizations />} />
                <Route path="events' element={<EventsCollection />} />
              </Route>
              <Route path="dashboard/:eventId">
                <Route index element={<Dashboard />} />
                <Route path="budget" element={<Budget />} />
                <Route path="contacts" element={<Contacts />} />
                <Route path="orders" element={<Orders />} />
                <Route path="tasks" element={<Tasks />} />
                <Route path="organization" element={<OrganizationDetails />} />
                <Route path="team" element={<Team />} />
                <Route path="event" element={<EventDetails />} />
              </Route>
            </Route>

            <Route element={<AnonymousRoutes />}>
              <Route path='login' element={<Login />} />
              <Route path='register' element={<Register />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </AuthContext.Provider>
    </ThemeProvider>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search