ReactJS – Dynamic Routes | React Tutorial

📌 What are Dynamic Routes?

Dynamic Routes in React Router

React Router supports two types of routing:

Static Routing: Routes are defined in a centralized location before rendering.
Dynamic Routing: Routes are initialized dynamically at runtime, when the page gets rendered.

Note: Give priority first to static routes, then dynamic routes.

📌 Static Routing

In static routing, all routes are declared in a centralized file (e.g., App.jsx). These routes are loaded before the application starts rendering.

⚡ Dynamic Routing

In dynamic routing, the routing configuration is defined as components render. Routes can include dynamic parameters such as :id for user profiles, product details, etc.

React Playground

import React from 'react'
import { Route, Routes} from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'
import PageNotFound from './PageNotFound.jsx'
import Products from './Products.jsx'
import Shirts from './Shirts.jsx'
import Jeans from './Jeans.jsx'
import Users from './Users.jsx'
import UserDetails from './UserDetails.jsx'
import Admin from './Admin.jsx'

const App = () => {
  return (
    <>
    <Navbar/>
    <Routes>    
      <Route path='/' element={<Home/>}/>
      <Route path='/products' element={<Products/>}>
        <Route index element={<Shirts/>}/>
        <Route path='shirts' element={<Shirts/>}/>
        <Route path='jeans' element={<Jeans />}/>
      </Route>
      <Route path='/about' element={<About/>}/>
      <Route path='/contact' element={<Contact/>}/>
      <Route path='/users' element={<Users/>}/>
      {/* Dynamic Routing */}
      <Route path='/users/:id' element={<UserDetails/>}/> 
      <Route path='/users/admin' element={<Admin/>}/> 
      <Route path='*' element={<PageNotFound/>}/>
    </Routes>
    </>
  )
}

export default App

Open Sandbox

📌 Sorting Technique for Dynamic Routes

Dynamic routes should be declared after static routes. Otherwise, React Router may match dynamic parameters before static ones.

For example, always declare /users/admin before /users/:id.

React Playground

import React from 'react'
import { Route, Routes} from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'
import PageNotFound from './PageNotFound.jsx'
import Products from './Products.jsx'
import Shirts from './Shirts.jsx'
import Jeans from './Jeans.jsx'
import Users from './Users.jsx'
import UserDetails from './UserDetails.jsx'
import Admin from './Admin.jsx'

const App = () => {
  return (
    <>
    <Navbar/>
    <Routes>    
      <Route path='/' element={<Home/>}/>
      <Route path='/products' element={<Products/>}>
        <Route index element={<Shirts/>}/>
        <Route path='shirts' element={<Shirts/>}/>
        <Route path='jeans' element={<Jeans />}/>
      </Route>
      <Route path='/about' element={<About/>}/>
      <Route path='/contact' element={<Contact/>}/>
      <Route path='/users' element={<Users/>}/>
      /* sort technic Dynamic Routing*/
      <Route path='/users' element={<Users/>}>
        <Route path=':id' element={<UserDetails/>}/> 
        <Route path='admin' element={<Admin/>}/>  
      </Route>

    </Routes>
    </>
  )
}

export default App

Open Sandbox

react

Nearby lessons