4

How can you render a composed Route component

code example

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

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

2 Answers 2

0

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>} />
1
  • 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
    Commented Sep 21, 2021 at 20:20
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>} />

Not the answer you're looking for? Browse other questions tagged or ask your own question.