CODEWITHSUNDEEP
javascriptreactjsreact-router
Rio
Rio

Reputation: 13

Why would I want to nest my React Routes?

I am having a hard time understanding why I would want to nest my react routes through components. In the following example you have two components spread across multiple files.

File 1:

 <Route path='/topics' component={Topics} />

File 2:

    const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
)

I am currently building a CRM for my company, where instead I am doing this:

routes/index.js

         const routes = [
...
          { path: '/app/analytics/competitors', component: Competitors, meta: { title: 'Competitor Data', description: '' } },
          { path: '/app/analytics/competitors/:id', component: CompetitorById, meta: { title: 'Competitor Report', description: '' } }]
    export default routes

App.js:

  <Provider {...RootStore}>
    <Router history={RootStore.routerStore.history}>
      <Switch>
        {routes.map((route) => {
            return (
              <Route
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );
          }
        })}
      </Switch>
    </Router>
  </Provider>

When you have dozens of routes, I find this to be much clearer to read, implement and understand what is going on with my router.

It is more similar to the way I have seen routes implemented in other frameworks, such as VueJS's Vue StoreFront.

Is there anything wrong with what I am doing here, and if not, why do people nest their routes?

Thanks :)

Edit:

To further extend, I am using the routes as following for anything that required authorisation:

            return (
              <AppRoute
                key={route.path}
                path={route.path}
                component={route.component}
                exact={true}
                meta={route.meta}
              />
            );

This named route are being declared like so:

const AppRoute = ({ ...props }) =>
  RootStore.userStore.hasSession ? (
    <Theme>
      <Route {...props} />
    </Theme>
  ) : (
    <Redirect to={"/login"} />
  );

Within theme we have shared components that are used between every page, such as the navbar and header. This prevents re-rendering, so in essence each route is a container rather than a whole page.

Upvotes: 1

Views: 59

Answers (1)

Martin Seeler
Martin Seeler

Reputation: 6992

One short but important reason would be re-rendering.

If you've got one route rendering under /foo and one under /foo/:id, then React would not need to re-render the foo route compinent, even when you switch from one id to another. If you don't nest them, everything has to be re-rendered again.

This has even more benefits when you want to add some simple rules, e.g. only allow users to enter /foo when they're authenticated. You can add this rule to your /foo route component. If a user is authenticated, the content is rendered, as well as all sub-routes become available. Without nesting, you would need to implement it in every route again.

Upvotes: 2

Related Questions