Router: Use React.Fragment inside Router component?

[alexluong]

Hi. When I use React.Fragment inside Router, it gave me an error. I wonder if that's the intended behavior or if it's some sort of a bug?

Here is my use case:

{isAuthed ? (
    <React.Fragment>
        <Redirect from="/sign-in" to="/" />
        <Redirect from="/sign-up" to="/" />
    <React.Fragment>
) : (
    <React.Fragment>
        <SignInPage path="/sign-in" />
        <SignUpPage path="/sign-up" />
    <React.Fragment>
)}

Here is the error:

[tonskey]

+1, same error with the same usercase

[niccai]

If it fits your broader use case, I would suggest returning different Routers per auth state - not just routes.

[joefiorini]

We ran into this issue too, but with a slightly different use case. We have routes we want to expose based on what type of user is using the app. Ie. if it's a client, they have the cilent routes, if it's an internal user they have the internal user routes. That way routes they aren't allowed to acceess don't even get exposed (and the code will never get downloaded via lazy loading).

Ie.

<Router>
  <Login path="/login">
  <Register path="/register">
  {isClient  ? 
     <>
       <ClientUI path="/client" />
      {/* ClientAdminUI is separate for lazy loading purposes; same user type, different route */}
      <ClientAdminUI path="/admin" />
    </> : null}
    {isInternalEmployee ? <InternalEmployeeUI path="/internal" />}
</Router>