嵌套路由组件想在那个一级路由组件里嵌套，就在它里面写子路由，子路由的path地址直接写二级的名字，不用带“/”，elem

想在那个一级路由组件里嵌套，就在它里面写子路由，子路由的path地址直接写二级的名字，不用带“/”，element的后面照常直接调用子组件。
接下来在子组件路由里，引入Outlet组件（import {Outlet} from "react-router-dom"），
然后把Outlet组件放到相应的地方。子组件的Link直接写在和Outlet组件所在的同一个js文件里，该组件里的Link的to属性，也是直接写子路由path的地址名。不带“/”

export default class App extends Component {
  render() {
    return (
      <div className='nav'>
         <ul className='nav-link'>
            <li><NavLink to="/">首页</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>
            <li><NavLink to="/address">Address</NavLink></li>
         </ul>
         <p className='rt'>
            <Routes>
                <Route path="/" element={<Index></Index>}></Route>
                <Route path="/about/*" element={<About></About>}/>
                <Route path="/address" element={<Address></Address>}></Route>
            </Routes>
         </p>
      </div>
    )
  }
}



export default function About() {
  return (
    <div>
        About
        <p>
            <NavLink to="em">Em</NavLink>
            <NavLink to="con">Con</NavLink>
        </p>
        <Routes>
        <Route path="em" element={<AboutEm></AboutEm>}></Route>
        <Route path="con" element={<AboutCon></AboutCon>}></Route>
        </Routes>
    </div>
  )
}

还有一种配置子路由嵌套：把子路由在自己的js文件里调用，只不过把子路由的父亲path路径后面加一个“/*”，子组件路由照常写

路由传参有以下四种方式：

方法一 `params`

（通配符传值，只能传一个，并且是字符串）：匹配Route Path（path=“/user/：id”），随后通过this.props.match.params.xxx获取参数（这是5里面的写法）
v6里通过usePrams（），它是动态路由传值。
参数解释：：id相当于是一个键名，可以自己定义名字，想往那个路由组件传值，就在该路由组件的path后面写上键名
XXX
读取参数用：this.props.match.params.name
优势：刷新地址栏，参数依然存在。
缺点：只能传字符串，并且，如果传的值太多的话，url变得长而丑陋。
在ES6里面，引入import {useParams} from “react-router-dom”
接着调用let useP=useParams（）；得到的是一个对象，通过useP.变量名就可以读取到数据。

方法二 `search`

<Route path="/web/deparManage" component={<组件>}/>
<Link to="web/deparMange?tenantId=12121212">首页</Link>
this.props.history.push(pathname:"/web/deparMange?tenantId"+row.tenantld)
v5里读取参数：this.props.location.search

传值
<li><NavLink to="/address?name=tom&age=18">Address</NavLink></li>
<Route path="/address" component/element={组件}/>

在子路由组件里接收(函数式组件)
import {useLocation} from "react-route-dom"
export default function Address(props) {
    let loc=useLocation()
    console.log(loc.search)//?name=tom&age=18
  return (
    <div>Address</div>
  )
}

方法三 `query`

XXX 读取参数：this.props.location.query.name 缺点：刷新地址栏，参数丢失。

传值：
<li><NavLink to={{pathname:"address",query:{name:"tom",age:20}}}>Address</NavLink></li>

接收
v5；里：this.props.history.push(){}

方法四 `state`

配置Link.to (to={{pathname:"/about",state:{"name":"tom"}}}) 读取参数：this.props.location.state.XXX获取参数优缺点：同query

import React from 'react'
import { Link,useNavigate } from 'react-router-dom'
const data=[
    {
        id:1,
        name:"海绵宝宝"
    },
    {
        id:2,
        name:"派大星"
    }
]
export default function List() {
    let nav=useNavigate()
  return (
    <div>
        <h1>列表</h1>
        {/* 实现点击跳转到详情 */}
        <div>
            {data.map(item => <Link key={item.id} to={"/list/"+item.id}>{item.name}</Link>)}
        </div>
        {/* 实现点击跳转到详情，这两个功能是一样的，button是编程式跳转 */}
        <div>
            {data.map(item => 
                <button key={item.id} onClick={()=>
                    {nav('/list/'+item.id,{state:item})}
                }>跳转</button>    
            )}
        </div>
    </div>
  )
}

v6里面用state传值写法：

传值页面<Link to={pathname:"路径",state:{键名：键值}；
接收数据的页面用useLocation，对它进行调用，然后.state就可以得到传过去的值。

一级路由点进去，有二级路由，并且点击一级路由之后，要默认显示二级路由，就设置如下：

二级路由页面写
导航部分：
<Link to="/about">关于我们</Link>

配置路由部分
<Route index element={<About/>}>
<Route path="about" element={<About/>}/>

嵌套路由组件

路由传参有以下四种方式：

方法一 params

方法二 search

方法三 query

方法四 state