CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Brandon triana
Brandon triana

Reputation: 21

No routes matched location

hello I have an error with the React Router routes, mainly it told me that the routes do not match.

I have a route that leads to a component with two other routes and they do not match.

MainRouter

<AuthContext.Provider value={{
    user,
    setUser
  }}>
  <BrowserRouter>
    <Routes>
      <Route path="/" element={ <AppRouter /> }>
      </Route>
    </Routes>
  </BrowserRouter>
  </AuthContext.Provider

Routers

<Routes>
  <Route path='/profile' element={
    <PrivateRoute isAuth={user.logged}>
      <ProfileScreen />
    </PrivateRoute>
  } />
  <Route path='/' element={
    <PrivateRoute isAuth={user.logged}>
      <HomeScreen />
    </PrivateRoute>
  } />
  <Route path="/auth/*" element={
    <PublicRoute isAuth={user.logged}>
      <AuthRouter setChecking={setChecking} />
    </PublicRoute>
  } />
  <Route path='*' element={<Navigate to='/' />}/>
</Routes>

AuthRouter

<Routes>
  <Route path='login' element={<LoginScreen setChecking={setChecking} />} />
  <Route path='welcome' element={<WelcomeScreen />} />
  <Route path='*' element={<Navigate to='/login' />} />
</Routes>

Upvotes: 2

Views: 8632

Answers (1)

Drew Reese
Drew Reese

Reputation: 202686

I believe I've reproduced the issue you face in a running codesandbox. If you read all the errors (2x) they inform you what the issue is and how to resolve it.

Errors:

You rendered descendant <Routes> (or called useRoutes()) at "/" (under <Route path="/">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

Please change the parent <Route path="/"> to <Route path="*">. in Routes (created by AppRouter) in AppRouter (created by MainRouter) in MainRouter (created by App) in App

and

No routes matched location "/auth/login"
in Routes (created by MainRouter) in MainRouter (created by App) in App

Both errors are resolved by fixing the root MainRouter component to append the trailing "*" wildcard character to allow further matching and rendering of nested routes. Note that this assumes your private/public route wrappers are using correct redirect paths.*

<AuthContext.Provider value={{ user, setUser }}>
  <BrowserRouter>
    <Routes>
      <Route path="/*" element={<AppRouter />} /> // <-- allow nested matching
    </Routes>
  </BrowserRouter>
</AuthContext.Provider>

* Example PrivateRoute and PublicRoute components. Note that PrivateRoute is redirecting to "/auth/login" and not "/login", which may be part of the cause of the second error.

const PrivateRoute = ({ children, isAuth }) =>
  isAuth ? children : <Navigate to="/auth/login" replace />;

const PublicRoute = ({ children, isAuth }) =>
  isAuth ? <Navigate to="/" replace /> : children;

Since you didn't clarify exactly which locations didn't have a matching route, the "/login" route of your AuthRouter seems a good candidate for the offender since it's rendered on "/auth/*" by AppRouter. It also has an invalid redirect target for unknown paths; it's redirecting to a root "/login" path that doesn't exist. Update this redirect to "/auth/login".

const AuthRouter = ({ setChecking }) => (
  <Routes>
    <Route path="login" element={<LoginScreen setChecking={setChecking} />} />
    <Route path="welcome" element={<WelcomeScreen />} />
    <Route path="*" element={<Navigate to="/auth/login" />} />
  </Routes>
);

Edit no-routes-matched-location

Upvotes: 4

Related Questions