react-router v6 wrapped route component not working

Question

How can you render a composed Route component

Bottomline from above example is that in the following code, the Wrapped route will never render it's element

const App = () => (
      <Routes>
        <Wrapped/>
        <Route path="/inline" element={<span >Inline works</span>} />
      </Routes>
);

const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} />

Is there a way of doing this kind of composition with the Route component with react-router v6? Or will react-router v6 only support Route directly nested in the Routes component?

Edit, more specifically I'm trying to get a recommendation for using a ProtectedRoute component, something among the lines of:

type Props  = {
  element: ReactElement;
  redirectRoute: string;
} & RouteProps;

const ProtectedRoute = ({element, redirectRoute, ...rest}: Props) => {
  const {isAuthenticated} = useAuth();
  <Route {...rest} element={isAuthenticated() ? element : <Navigate to={redirectRoute}/>}/>
}

EDIT: It seems like this used to work in older beta versions, so this might be a bug. At the moment the latest version is 6.0.0-beta.4 & I've logged an issue: https://github.com/remix-run/react-router/issues/8066

Please include the relevant code within the question itself. Also describe why you say *does not work* - does it throw an error, etc. — Brian Thompson, Sep 21 '21 at 14:31
It will not render the route, I've edited the question for clarity. — sjbuysse, Sep 21 '21 at 20:18

score 0 · Answer 1 · answered Sep 21 '21 at 14:53

In your code, you are trying to use Wrapped Component as a Router, but it's not. It's a React element returning a React Router element. Since you only need Router in this simple usecase, you can treat is as a function:

<Suspense fallback={null}>
   <Routes>
      {/* Use this as a normal function, and also function name etc.,*/}
      {Wrapped()}
      <Route path="/inline" element={<span>Inline works</span>} />
   </Routes>
</Suspense>

However, I would recommend not to complicate the routes by trying to add customizations on route and instead wrap your component that you want to route.

For eg.,

const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} />;

to

<Route path="/wrapped" element={<Wrapped>wrapped component</Wrapped>} />

I don't understand what you mean with 'you are trying to use Wrapped Component as a Router`? What I'm trying to do is use composition to create an "enhanced" `Route` component. I just edited my question, maybe this will clarify it for you. Would you still use you're answer for the `ProtectedRoute` use case? — sjbuysse, Sep 21 '21 at 20:20

Mbrevda · Answer 2 · 2021-11-10T15:49:09.033

0

Or will react-router v6 only support Route directly nested in the Routes component?

Correct, RRv6 does not support route composition. Instead, try using your <Wrapped /> component inside the element prop. E.g.

<Route path="/foo" element={<Wrapped>/* something here */</Wrapped>} />

edited Nov 10 '21 at 15:49

answered Nov 10 '21 at 14:02

Mbrevda

2,888
2
27
35

react-router v6 wrapped route component not working

2 Answers2