使用react-router-dom

Question

I split my routes into two files.

const masterRoutes=(

                      <Switch>
                      <Route path="/diamond"  component={DiamondMaster}   />
                      <Route path="/gram"     component={GramMaster}      />
                      </Switch>

                    )

export default masterRoutes; 



const userRoutes=(

                      <Switch>
                      <Route path="/user"  component={User}   />
                      <Route path="/store" component={Store} />
                      <Route path="/userlist" component={UserList} />
                      </Switch>

)



export default userRoutes;

app.jsx is the main file handling all routes.

export class App extends Component {
  render() {
    return (

          <div>


                  <Router history={history}  >
                      <div>
                      <AuthHeader isLoggedIn={true} />
                      <Route path="/" component={AuthHeader} />                                 
                      <Switch>
                      <Route path="/login" component={Login} />
                      <Route path="/tab" component={SettingsComp} />
                       {userRoutes}
                       {masterRoutes}
                     </Switch>
                      </div>
                  </Router>
            </div>
    );
  }

It is working fine when i click user component But MasterRoutes is not working.

App.jsx file doesn't take MasterRoutes file. Is there any other way to implement this?

I am bit new to reactjs. Please bear with my question.

Answer 1

What is happening is the first Switch statement is taking precedence. If you swap them around, then master works, and user doesn't.

I'm not exactly sure what the goal is but if you want the list of routes to be extracted, you can instead do this:

const masterRoutes=[
  <Route path="/diamond"  component={DiamondMaster}   />
  <Route path="/gram"     component={GramMaster}      />
];

const userRoutes=[
  <Route path="/user"  component={User}   />
  <Route path="/store" component={Store} />
  <Route path="/userlist" component={UserList} />
];

Instead of each of them having their own Switch , they instead are just arrays of Route s. So when you add them to the Switch tag you already have, you are just extending the number of routes to include those from userRoutes and masterRoutes.

All of your other code should be able to stay the same. Exporting, importing and adding them to the router {masterRoutes} {userRoutes} .

If you want child routes, that would handled differently.