How to make react router inside of another router?

Question

I am working on a project with react-router.

This is a project structure

main
   - mainRouter.tsx

   - programFolder
     - ProgramMainComponent.tsx
     - ProgramScheduleComponent.tsx
     - ProgramDetailComponent.tsx
     - programRouter.tsx

   - serviceFolder
     - ServiceMainComponent.tsx
     - ServiceFAQComponent.tsx
     - ServiceCustomerComponent.tsx
     - serviceRouter.tsx

And this is how I make programRouter.tsx and serviceRouter.tsx

// programRouter.tsx

const ProgramRouter = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path={'/program'} exact={true} component={ProgramMainComponent} />
          <Route path={'/program/schedule'}  exact={true} component={ProgramScheduleComponent} />
          <Route path={'/program/detail'}  exact={true} component={ProgramDetailComponent} /
      </Switch>
    </BrowserRouter>
  )
}

// serviceRouter.tsx

const ServiceRouter = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path={'/service'} exact={true} component={ServiceMainComponent} />
          <Route path={'/service/faq'}  exact={true} component={ServiceFAQComponent} />
          <Route path={'/program/customer'}  exact={true} component={ServiceCustomerComponent} />
      </Switch>
    </BrowserRouter>
  )
}

Here is the what I want to do.

As I add more pages, I want have each folder contains each their own router.tsx file and import those files inside of mainRouter.tsx file like the example below.

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { programRouter } from 'main/program';
import { serviceRouter } from 'main/service';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path='/' exact={true} component={MainComponent} />
          <Route path={'/program'} exact={true} component={programRouter} />
          <Route path={'/service'} exact={true} component={serviceRouter} />
      </Switch>
    </BrowserRouter>
  )
}

Is there a way I can use each router components inside fo mainRouter.tsx?

Simon Ingeson · Accepted Answer · 2019-12-13 02:43:47Z

1

There is an example of nesting components and routes in the React Router docs. Basically, you don't need to use BrowserRouter more than once at the root level. You should also remove the exact={true} props for the routes in the root component to ensure their child routes can render properly.

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { programRouter } from 'main/program';
import { serviceRouter } from 'main/service';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path='/' exact component={MainComponent} />
          <Route path={'/program'} component={programRouter} />
          <Route path={'/service'} component={serviceRouter} />
      </Switch>
    </BrowserRouter>
  )
}

answered Dec 13, 2019 at 2:43

Simon Ingeson

1,0118 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make react router inside of another router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related