SoFunction
Updated on 2025-04-07

Detailed explanation of the routing and nested routing writing methods of react-router-domV6 version

1 - Single-level routing

<NavLink to="/home">Home</NavLink>
<NavLink to="/about">about</NavLink>

<Routes>
  <Route path='/home' element={<Home/>}/>
  <Route path='/about' element={<About/>}/>
</Routes>

2 - Nested routes (about paths for nesting)

Level 1 routing

&lt;NavLink to="/home"&gt;Home&lt;/NavLink&gt;
&lt;NavLink to="/about"&gt;about&lt;/NavLink&gt;

&lt;Routes&gt;
  &lt;Route path='/home' element={&lt;Home/&gt;}/&gt;
  &lt;!--The route to be nested must be written here/*  In order to tell this route that it will follow other paths in the future
    NavLink Never write andRouteSame/about/*
    otherwise/about This button routingcssIn-houseactiveWill disappear
   --&gt;
  &lt;Route path='/about/*' element={&lt;About/&gt;}/&gt;
&lt;/Routes&gt;

Secondary routing

It is generally best to write the jump button in full, otherwise you will not be able to read the code clearly.

&lt;NavLink to="/about/news"&gt;news&lt;/NavLink&gt;
&lt;NavLink to="/about/message"&gt;information&lt;/NavLink &gt;

&lt;Routes&gt;
    &lt;Route path='news' element={&lt;News/&gt;}/&gt;
    &lt;Route path='message' element={&lt;Message/&gt;}/&gt;
&lt;/Routes&gt;

The path to the switched path needs to be written in the secondary route

React Router v6 uses routing nesting and redirection

V6 version and v5 version have a big difference. The following is V6 uses route nesting and route redirection methods. Subroutine paths do not need to be added with "/", and will be automatically spliced ​​in v6

import React, { Component } from 'react'
import { Route,Routes,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'
export default class App extends Component {
    render() {
        
        return (
            
            &lt;div&gt;
                
                &lt;div className='row'&gt;
                    &lt;Header/&gt;
                &lt;/div&gt;
                &lt;div className='row'&gt;
                    &lt;div className='col-xs-2 col-xs-offset-2'&gt;
                        &lt;div className='list-group'&gt;
                            {/* Link routing */}
                            &lt;MyNavLink to="/about" &gt;About&lt;/MyNavLink&gt;
                            &lt;MyNavLink  to="/home" &gt;Home&lt;/MyNavLink&gt; 
  
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className='col-xs-6'&gt;
                    &lt;div className='panel'&gt;
                        &lt;div className='panel-body'&gt;
                            {/* Register a route */}
    
                                &lt;Routes&gt;
                                        {/* The first time you enter the page is to redirect to the /about path */}
                                        &lt;Route path="*" element={&lt;Navigate to="/about"/&gt;}&gt;&lt;/Route&gt;
                                        
                                        &lt;Route path="/about" element={&lt;About/&gt;}&gt;&lt;/Route&gt;
                                        &lt;Route path="/home/*" element={ &lt;Home/&gt;}&gt;                                    
                                        &lt;/Route&gt;
                                &lt;/Routes&gt;
         
                               
                        &lt;/div&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            
        )
    }
}

Home/

import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Routes,Navigate} from 'react-router-dom'
import News from './News'
import Messages from './Messages'
export default class Home extends Component {
    render() {
        return (
           &lt;div&gt;
               &lt;h3&gt;Homecontent&lt;/h3&gt;
               &lt;div className='list-group'&gt;
                                &lt;MyNavLink to="news" &gt;News&lt;/MyNavLink&gt;
                                &lt;MyNavLink  to="messages" &gt;Messages&lt;/MyNavLink&gt;  
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;Routes&gt;
                        
                        &lt;Route path="*" element={&lt;Navigate to="messages"/&gt;}&gt;&lt;/Route&gt;
                        &lt;Route path="news" element={&lt;News/&gt;}&gt;&lt;/Route&gt;
                        &lt;Route path="messages" element={&lt;Messages/&gt;}&gt;&lt;/Route&gt;
                    &lt;/Routes&gt;
                &lt;/div&gt;
           &lt;/div&gt;
        )
    }
}

Home/Messages/

import React, { Component } from 'react'

export default class Messages extends Component {
    render() {
        return (
            <ul>
                <li>message1</li>
                <li>message2</li>
                <li>message3</li>
                <li>message4</li>
            </ul>
        )
    }
}

MyNavLink/

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class MyVavLink extends Component {
    render() {
        return (
            <NavLink  className="list-group-item" {...}/>
        )
    }
}

This is the article about the detailed explanation of the routing and nested routing writing methods of react-router-domV6 version. For more related React Router v6 routing and nested routing content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!