react-router-domV6版本的路由和嵌套路由写法详解

目录

• 1-单级路由
• 2-嵌套路由（about路径进行嵌套）
• ReactRouterv6使用路由嵌套和重定向

1 - 单级路由

Home
about


  }/>
  }/>

2 - 嵌套路由（about路径进行嵌套）

一级路由

Home
about


  }/>
  
  }/>

二级路由

跳转按钮一般最好写完整，否则看代码看不清楚

新闻
消息


    }/>
    }/>

跳转切换的path要写二级路由的路径

React Router v6使用路由嵌套和重定向

v6版本与v5版本差异较大，以下为V6使用路由嵌套及路由重定向方法,子路由路径不用加"/"，v6中会自动拼接

App.jsx

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 (
            
            

                
                

                    

                
                

                    

                        

                            {/* 链接路由 */}
                            About
                            Home 
  
                        
                    
                
                

                    

                        

                            {/* 注册路由 */}
    
                                
                                        {/* 首次进入页面是重定向到/about路径 */}
                                        }>
                                        
                                        }>
                                        }>                                    
                                        
                                
         
                               
                        

                    
                
            
            
        )
    }
}

Home/index.jsx

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 (
           

               
Home内容
               

                                News
                                Messages  
                
                

                    
                        
                        }>
                        }>
                        }>
                    
                
           
        )
    }
}

Home/Messages/index.jsx

import React, { Component } from 'react'

export default class Messages extends Component {
    render() {
        return (
            

                
message1
                
message2
                
message3
                
message4
            
        )
    }
}

MyNavLink/index.jsx

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class MyVavLink extends Component {
    render() {
        return (
            
        )
    }
}

到此这篇关于react-router-domV6版本的路由和嵌套路由写法详解的文章就介绍到这了,更多相关React Router v6路由和嵌套路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！