react嵌套子路由使用(v6)

router.js

import React, { Component } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

{/* 引入组件 */}
import Home from 'XXX';
import Page1 from 'XXX';
import Page2 from 'XXX';
import Page3 from 'XXX';
import Children1 from 'XXX';
import Children2 from 'XXX';
import Children3 from 'XXX';

export default class router extends Component {
    render() {
        return (
            <Routes>
                {/* 重定向 */}
                <Route path="/" element={<Home />} exact></Route>
                <Route path="home" element={<Home />}></Route>
                <Route path="page1" element={<Page1 />}></Route>
                <Route path="page2" element={<Page2 />}></Route>
                <Route path="page3" element={<Page3 />}>
　　　　　　　　　　　　{/* 默认子路由，注意重定向路径最前面要加'/'，并且斜杠后面跟的是带有父路由的完整路径 */}
                    <Route index element={<Navigate to="/page3/page1-children1" />}></Route> 
　　　　　　　　　　　　{/* 注意子路由名称前面不要加'/' */}
                    <Route path="page3-children1" element={<Children1 />}></Route>
                    <Route path="page3-children2" element={<Children2 />}></Route>
                    <Route path="page3-children3" element={<Children3 />}></Route>
                </Route>
                <Route path="*" element={<Navigate to="home" />}></Route>
            </Routes>
        )
    }
}

ps：注意Route标签的path属性p要小写！！！（心累。。。）

App.js

...
import Router from 'XXX/router.js';
...
{/* 主路由出口 */}
<div>
    <Router></Router>
</div>

page.js

...
import { Outlet } from 'react-router-dom';
...
{/* 子路由出口 */}
<div>
    <Outlet></Outlet>
</div>