React 路由6.4配置

提示: 此教程使用react-router 6.4 版本 + hooks 语法实现

1, 下载react的路由模块(最新6.10.0)
    npm install react-router-dom 
 
2, 创建路由文件src/router/index.jsx,  导入根组件和需要路由跳转的组件
    import { createBrowserRouter, Navigate } from "react-router-dom";
    import App from "../App";
    import Home from "../pages/Home/Home"
    
3, 创建路由对象并导出
    const router = createBrowserRouter([
        {
            path: "/",
            element: <App />,
            children: [ // 子路由
                {
                    path: "/",
                    // 路由重定向, 借助Navigate组件跳转
                    element: <Navigate to="home" replace />,
                },
                {
                    path: "home",
                    element: <Home />,
                }
            ],
        },
    ]);
    export default router;

4, 在入口文件 src/main.jsx中,从路由模块导入工具组件RouterProvider 和路由对象, 并渲染到根标签root
    import { RouterProvider  } from 'react-router-dom'
    import router from './router/index.jsx';
    ReactDOM.createRoot(document.getElementById('root')).render(
        <RouterProvider router={router} />
    )

5, 在app.jsx根组件中导入路由出口组件 Outlet 
    import { Outlet } from "react-router-dom"

6, 在app.jsx根组件中渲染路由出口
     <Outlet></Outlet>

7, 在需要跳转的页面, 从路由模块导入工具组件 NavLink
    import {NavLink} from 'react-router-dom'

8, 使用NavLink组件执行路由跳转
    <NavLink to="/">首页/NavLink>