ReactJs dynamic component render with dynamic routes

Question

In my project based on type of application chosen by user, components have to rendered and further navigates to different routes. In all these applications the layout remains the same. I have to add the different components based on the routes. Home page main component

<Card>
<Card.Body>
<DYNAMIC_COMPONENT /> //based on application chosen
<button onClick={()=> takeToNextRoute}>CLICK ME</button>
<Card.body>
</Card>

based on button click in Home, user will be taken to different routes based on Application type

<div>
<Router>
<Switch>
<Route exact path='/:{based on app}' component={dynamicCOMP}></Route>
<Route exact path='/about:{based on app}' component={dynamicCOMP1}></Route>
<Route exact path='/profile:{based on app}' component={dynamicCOMP2}></Route>
<Route exact path='/select:{based on app}' component={dynamicCOMP3}></Route>
</Switch>
</Router>
</div>

How to render the components in Home dynamically based on application chosen and then on button click route to dynamic routes with its dynamic components? I am new to ReactJs and have no clue how to go about this.

sid c sid c · Accepted Answer · 2021-07-24T00:00:26

You can have an object with all the routes and components:

const routes = {
  "/": HomeComponent,
  "/about": AboutComponent,
  "/profile": ProfileComponent,
  "/select": SelectComponent
}

And then in your router, it would look like:

<div>
<Router>
<Switch>
{Object.keys(routes).map((route, i) => <Route key = {i} exact path = {route} component = {routes[route]}/>
</Switch>
</Router>
</div>

ReactJs dynamic component render with dynamic routes

1 Answers