CODEWITHSUNDEEP
javascriptreactjsroutesreact-routerreact-router-dom
Jorel Amthor
Jorel Amthor

Reputation: 1294

React router DOM : Switch not working if child element isnt a route

I'm facing an issue im not able to comprehend. I'm working on a React codebase and we started having too much Routes, so i decided to refactor it a little bit. There is some logic to determine if we should redirect to a route that will check if you're authenticated, and if not will redirect you to the sign in page. We also have basic routes without that mechanism that just display a component ( for every page that doesnt need authentication like sign in, forgot password etc. )

I've decided to abstract that logic in a different component, that will ultimatley render a Route. As a first step in that direction, i decided to wrap the rendering of every route in a single component, instead of having the whole logic just laying down there.

Here's the code for the routes:

      <Switch>
        {Object.values(userRoutes).map((route: SanitizedRoute) => (
          <RouteController route={route} key={route.PATH} />
        ))}
      </Switch>

RouterController.tsx

  return (
    <Route
      path={props.route.PATH}
      exact={props.route.EXACT}
      render={() => {
        return <Layout>{props.route.COMPONENT}</Layout>;
      }}
    />
  );

All the information for the Route component is passed down as a prop. This is where i start getting problems. If i try to access /path_b what is rendered is the first element of my userRoute array, eventhough the Route doesn't match; /path_b or /path_c or /path_whatever will always render the compononent defined for /path_a. Accessing any path actually returns the /path_a component as if it was the only one present in my Switch component.

If i were to replace the RouteController component by its content as such :

<Switch>
    {Object.values(userRoutes).map((route: SanitizedRoute) => (
          <Route
            path={route.PATH}
            exact={route.EXACT}
            key={route.PATH}
            render={() => {
              return <Layout>{route.COMPONENT}</Layout>;
            }}
          />
        ))}
</Switch>

Then everything would work fine as expected. Wrapping my RouteController with a Switch component is also working fine - although im not sure about the side effect of having a Switch per route ?

      {Object.values(userRoutes).map((route: SanitizedRoute) => (
        <Switch key={route.PATH}>
          <RouteController route={route} />
        </Switch>
      ))}

My questions are:

Here's a Sandbox to display this behavior : https://codesandbox.io/s/react-router-dom-switch-test-forked-sqc98 I wrapper 1 route in a component. When using the wrapper nothing work. If i copy paste the wrapper content inside the Switch, it does.

Upvotes: 2

Views: 2034

Answers (1)

Drew Reese
Drew Reese

Reputation: 202605

Why isn't it possible to wrap all of those routes in a single <Switch>?

This is because of how the Switch component works, it renders the first child <Route> or <Redirect> that matches the location.

Switch

The RouteController component is neither, so it's not involved in matching, and in fact only first component will be rendered. This is why you see only the first route rendered regardless of path.

Is there some props from the <Switch> component I should manually pass down to the <Route> component via my <RouterController>?

It's possible to move/define a path prop (and any other "route" prop) on the RouteController the Switch may use for path matching, but this is ill-advised and not a documented use case of the Switch and Route components.

I know that the <Switch> is used to render the first route that match the path. Does having multiple <Switch> kind of defeat the purpose of using a <Switch> in the first place?

Yes, if you are rendering multiple Switch components, each with only a single Route component then they aren't really switching routes at this point and you're relying on the inclusive route matching of any wrapping router, or exclusively matching in the case of any other wrapping switches.

Solution

Instead of trying to map routes into your RouterController component and dealing with the issues of what is directly composing what, have your RouterController consume all the routes as a prop, and render them into a single Switch component.

RouterController.tsx

const RouterController = ({ routes }) => {
  // any component business logic

  return (
    <Switch>
      {routes.map((route: SanitizedRoute) => (
        <Route
          path={route.PATH}
          exact={route.EXACT}
          key={route.PATH}
          render={() => <Layout>{route.COMPONENT}</Layout>}
        />
      ))}
    </Switch>
  );
};

...

<RouterController routes={Object.values(userRoutes)} />

Upvotes: 1

Related Questions