Navigate back to the homepage

How to generate dynamic route in React

Infinitbility
React
June 7th, 2021 · 1 min read
How to generate dynamic route in React

Hello Friends,

Welcome To Infinitbility!

This article will help you to create dynamic route in react like server rendering, here we are using react-router and react-router-dom to manage route in react.

In this article, I will share Routes component to manage routes with routes props, every time it will create routes when props change.

Let’s start today topic how to render dynamic route in React

Step 1: Import Component

First, we have to import all component in routes files and create object with their key, because we have to access component dynamically.

routes.jsx

1import React, { useEffect, useState } from 'react';
2import {Switch, Route } from 'react-router-dom';
3
4import ForgotPassword from './common/forgotPaasword';
5import Login from './common/login';
6import CreateProfile from './clinician/createProfile';
7import Dashboard from './clinician/dashboard';
8
9const ComponentList = {
10 'AdminCreateProfile' : AdminCreateProfile,
11 'AdminManageProfile' : AdminManageProfile,
12};

Step 2: Server rendering

Here we are assuming route file getting route array from props.

1import React, { useEffect, useState } from 'react';
2import {Switch, Route } from 'react-router-dom';
3
4import ForgotPassword from './common/forgotPaasword';
5import Login from './common/login';
6import CreateProfile from './clinician/createProfile';
7import Dashboard from './clinician/dashboard';
8
9const ComponentList = {
10 'AdminCreateProfile' : AdminCreateProfile,
11 'AdminManageProfile' : AdminManageProfile,
12};
13
14const Router = (props) => {
15 const [ routes, setRoutes ] = useState(props.routes);
16
17 useEffect(() => {
18 //console.log('routes changed', props.routes);
19 setRoutes(props.routes);
20 }, [props.routes])
21
22 return (
23 <Switch>
24
25 <Route exact path={`/`} component={Login} />
26 <Route path='/forgot-password' component={ForgotPassword}/>
27
28 {
29 routes != null && routes != '' &&
30 routes.length > 0 && routes.map((route, index) => (
31
32 /* check if the component exists for each route */
33 typeof(ComponentList[route.component]) != 'undefined' ?
34 <Route
35 exact
36 key={index}
37 path={route.route_name}
38 component={ComponentList[route.component]}
39 />
40 : null
41
42 ))
43 }
44
45 </Switch>
46 )
47}
48
49export default Router;

Subscribe Our Newsletter for the weekly update.

May be you are looking for it

  1. How to show bottom in react datepicker
  2. How to generate dynamic route in React
  3. Deploy React Application on Ubuntu Apache

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Tutorials

React Native

Categories

More articles from Infinitbility

How to show bottom in react datepicker

How to show bottom in react datepicker

show react datepicker down side

June 6th, 2021 · 1 min read
Build failed after update Xcode 12.5

Build failed after update Xcode 12.5

how to solve Build failed after update Xcode 12.5

June 1st, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]