CODEWITHSUNDEEP
javascriptreactjsroutesreact-router-dom
Asif vora
Asif vora

Reputation: 3359

React js multiple routes files doesn't work

I am working on one of the project and project has multiples routes aroud 400+ so main routes file was too long. So I just split the routes code based on the modules and import into the main routes file. After importing the split route file into the main Routes file routes doesn't work.

Am using 'react-router-dom'

Main File

ReactDOM.render(
     <React.Suspense
      fallback={<div>Loading</div>}
    >
      <Switch>
       <Route exact path="/"component={Home}  />
       <UsersRoutes />
       <ProductsRoutes />
       </Switch>
    </React.Suspense>,
    document.getElementById('app')
);

UsersRoutes File

<>
  <Route exact path="/all-users" component={Component1} />
  <Route exact path="/active-users" component={Component2} />
  <Route exact path="/deactivated-users" component={Component3} />
  ...
</>

ProductsRoutes File

<>
  <Route exact path="/all-products" component={Component1} />
  <Route exact path="/sale-products" component={Component2} />
  <Route exact path="/feature-products" component={Component3} />
  ...
</>

Upvotes: 1

Views: 702

Answers (1)

Honey
Honey

Reputation: 2398

You can try this approach.

UsersRoutes.js

import ...
export default [
    { path: '/all-users', component: Component1},
    { path: '/active-users', component: Component2}
]

And use it like this.

<Switch>
    <Route exact path="/"component={Home}  />
    { UserRoutes.map(props => <Route {...props} />) }
</Switch>

Upvotes: 1

Related Questions