Uncaught Error: [RouteWrapper] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

user_19234803 0
Viewed 162

I'm using React Router v6 and am creating private routes for my application.

In file Route.js, I've the code

export default function RouteWrapper({
  element: Element,
  isPrivate,
  ...rest
}) {
  const { signed, loading } = useContext(AuthContext);

  if (loading) {
    return <div></div>;
  }

  if (!signed && isPrivate) {
    return <Navigate to="/" />;
  }

  if (signed && !isPrivate) {
    return <Navigate to="/dashboard" />;
  }

  return <Route {...rest} render={(props) => <Element {...props} />} />;
}

And in file index.js I've written as:

  return (
      <Routes>
        <Route path="/" element={SignIn} />
        <Route path="/register" element={SignUp} />

        <Route path="/dashboard" element={Dashboard} isPrivate />
        <Route path="/profile" element={Profile} isPrivate />
        <Route path="/customers" element={Customers} isPrivate />
        <Route path="/new" element={New} isPrivate />
        <Route path="/new/:id" element={New} isPrivate />
      </Routes>
  );
}

Is there something I'm missing?

react-router reactjs javascript
2 Answers

You should convert

<Routes>
  <Route exact path="/" element={Dashboard} />
</Routes>

to

<Routes>
  <Route exact path="/" element={<Dashboard/>} />
</Routes>

Also if you want to keep your UI in sync with the URL use like this.

<BrowserRouter>
    <Routes>
       <Route exact path="/" element={<Dashboard/>} />
    </Routes>
</BrowserRouter>

Best.

user_68960080

Issue

  • RouteWrapper isn't a Route component, and fails an invariant check by react-router-dom.
  • RouteWrapper is directly rendering a Route component, which if the first invariant wasn't failed would trigger another invariant violation. Route components can only be rendered directly by the Routes component or another Route component in the case of building nested routing.

In short, in react-router-dom@6 custom route components are no longer supported. You should instead use wrapper components/layout routes to handle this use case.

Solution

Convert RouteWrapper to a wrapper component that renders an Outlet component for nested routed components to be rendered into.

Example:

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

export default function RouteWrapper({ isPrivate }) {
  const { signed, loading } = useContext(AuthContext);

  if (loading) {
    return <div></div>;
  }

  if (!signed && isPrivate) {
    return <Navigate to="/" />;
  }

  if (signed && !isPrivate) {
    return <Navigate to="/dashboard" />;
  }

  return <Outlet />; // <-- nested routes render here
}

Wrap the routes you want to protect with the RouteWrapper.

return (
  <Routes>
    <Route element={<RouteWrapper />}>
      <Route path="/" element={<SignIn />} />
      <Route path="/register" element={<SignUp />} />
    </Route>

    <Route element={<RouteWrapper isPrivate />}>
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="/customers" element={<Customers />} />
      <Route path="/new" element={<New />} />
      <Route path="/new/:id" element={<New />} />
    </Route>
  </Routes>
);

See Layout Routes for further details.

user_86908570
Related