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

目录
  • 1-单级路由
  • 2-嵌套路由(about路径进行嵌套)
  • ReactRouterv6使用路由嵌套和重定向

1 - 单级路由

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

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

2 - 嵌套路由(about路径进行嵌套)

一级路由

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

<Routes>
  <Route path='/home' element={<Home/>}/>
  <!--要嵌套的路由这里一定要写/*  为了告诉这个路由后续会跟着其它路径
    NavLink 千万不要写和Route一样的/about/*
    否则/about 这个按钮路由css中的active会消失
   -->
  <Route path='/about/*' element={<About/>}/>
</Routes>

二级路由

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

<NavLink to="/about/news">新闻</NavLink>
<NavLink to="/about/message">消息</NavLink >

<Routes>
    <Route path='news' element={<News/>}/>
    <Route path='message' element={<Message/>}/>
</Routes>

跳转切换的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 (
            
            <div>
                
                <div className='row'>
                    <Header/>
                </div>
                <div className='row'>
                    <div className='col-xs-2 col-xs-offset-2'>
                        <div className='list-group'>
                            {/* 链接路由 */}
                            <MyNavLink to="/about" >About</MyNavLink>
                            <MyNavLink  to="/home" >Home</MyNavLink> 
  
                        </div>
                    </div>
                </div>
                <div className='col-xs-6'>
                    <div className='panel'>
                        <div className='panel-body'>
                            {/* 注册路由 */}
    
                                <Routes>
                                        {/* 首次进入页面是重定向到/about路径 */}
                                        <Route path="*" element={<Navigate to="/about"/>}></Route>
                                        
                                        <Route path="/about" element={<About/>}></Route>
                                        <Route path="/home/*" element={ <Home/>}>                                    
                                        </Route>
                                </Routes>
         
                               
                        </div>

                    </div>
                </div>
            </div>
            
        )
    }
}

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 (
           <div>
               <h3>Home内容</h3>
               <div className='list-group'>
                                <MyNavLink to="news" >News</MyNavLink>
                                <MyNavLink  to="messages" >Messages</MyNavLink>  
                </div>
                <div>
                    <Routes>
                        
                        <Route path="*" element={<Navigate to="messages"/>}></Route>
                        <Route path="news" element={<News/>}></Route>
                        <Route path="messages" element={<Messages/>}></Route>
                    </Routes>
                </div>
           </div>
        )
    }
}

Home/Messages/index.jsx

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/index.jsx

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.props}/>
        )
    }
}

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

(0)

相关推荐

  • 详解react-router-dom v6版本基本使用介绍

    目录 Routes Route Navigate NavLink useRoutes 嵌套路由 路由传参 编程式导航 Routes 代替Switch组件,不会向下匹配 用来包裹Route Route 必须被Routes组件包裹 component属性变成element caseSensitive 路径大小写敏感属性,默认是不敏感(访问/about = /ABOUT) index 与path属性是互斥的,index表示为当前路由的根 可以用作layout组件,不写element属性,写了要与 Ou

  • React router动态加载组件之适配器模式的应用详解

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data'; function App(){ return ( <Router> <Switch> <Route exact path="/" render={() => (<Redirect to="/center" />)}

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

    目录 1-单级路由 2-嵌套路由(about路径进行嵌套) ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</NavLink> <Routes>   <Route path='/home' element={<Home/>}/>   <R

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

  • js单页hash路由原理与应用实战详解

    本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下: 什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能做在一个页面内. 那所谓的单页路由应用就是:在一个页面内,通过切换地址栏的URL来实现切换内容的变化. 如何知道URL切换了呢? 当url后面的锚文本发生变化时, 会触发onhashchange事件.通过这个事件,我们就可以对不同的URL 做出不同的处理.锚

  • Vue-CLI项目中路由传参的方式详解

    一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层 <!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } --> <router-link :to="`/course/detail

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • vue路由分文件拆分管理详解

    这里说的路由拆分指的是将路由的文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发.具体要不要拆分,那就要视你的项目情况来定了,如果项目较小的话,也就一二十个路由,那么是拆分是非常没必要的.但倘若你开发一些功能点较多的商城项目,路由可以会有一百甚至几百个,那么此时将路由文件进行拆分是很有必要的.不然,你看着index.js文件中一大长串串串串串串的路由,也是很糟糕的. 首先我们在router文件夹中创建一个index.js作为路由的入口文件,然后新建一个modules文件夹,里面存放各

  • React如何利用Antd的Form组件实现表单功能详解

    一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe

  • C# 实现绘制PDF嵌套表格案例详解

    嵌套表格,即在一张表格中的特定单元格中再插入一个或者多个表格,使用嵌套表格的优点在于能够让内容的布局更加合理,同时也方便程序套用.下面的示例中,将介绍如何通过C#编程来演示如何插入嵌套表格到PDF文档. 要点概括: 1. 插入嵌套表格 2. 插入文字到嵌套表格 3. 插入图片到嵌套表格 使用工具 Spire.PDF 4.9.7 注: 1.这里使用的版本为4.9.7,经测试,对于代码中涉及的PdfGridCellContentList类和PdfGridCellContent类仅在使用该版本或者以上

  • java开发中嵌套类的详解及实例

     java开发中嵌套类的详解 在java语言规范里面,嵌套类(Nested Classes)定义是: A nested class is any class whose declaration occurs within the body of another class or interface. A top level class is a class that is not a nested class. 说的简单一点,就是定义在类里面的类.一般把定义内部类的外围类成为包装类(enclos

随机推荐