嵌套子路由

1.子路由设置

1.添加子路由,需要在父路由组件中添加子路由组件

2.默认子路由不需要添加path字段。只需要添加index属性,子路由的地址其实就是/pass
3.子路由的path不用添加/，访问的时候通过/pass/wx访问

import WX from "../pages/WX/WX.jsx"
import QQ from '../pages/QQ/QQ.jsx'
import RouterPass from "../pages/RouterPass/RouterPass.jsx";

<Route path="/pass" element={<RouterPass />}>
    <Route index element={<QQ />}></Route>
    <Route path="wx" element={<WX />}></Route>
</Route>

2.子路由出口容器

Outlet组件就是嵌套子路由的出口容器；

import { NavLink,Outlet } from "react-router-dom";

// 函数式组件 
function RouterPass() {
    return ( <div>
        <h1>routerPass中的内容</h1>

        {/* 子路由导航 */}
        <div className="childNav">
            <NavLink to={`/pass`} state={{sex:44444}}>
                默认子路由的二级路由跳转链接
            </NavLink>
            <NavLink to={`/pass/wx`} state={{sex:44444}}>
                wx子路由的二级路由链接
            </NavLink>
        </div>

        <h2>子路由的出口容器</h2>
        <div className="content">
            <Outlet></Outlet>
        </div>
    </div> );
}

export default RouterPass;