React路由6.3+hooks配置

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

1, 下载react的路由模块(默认最新6.3)
    npm install react-router-dom --save
 
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件 
    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
    import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >
    );

3, 创建路由文件src/router/index.js,  导入需要路由跳转的组件, 并导出路由配置数组
    import { Navigate } from "react-router-dom";
    import Home from "../pages/Home/Home"
    import User from "../pages/User/User"
    export default [
        {
            path: '/',
            element: <Home />
        },
        {
            path: '/user',
            element: <User />
        },
        {
            path: "/",
            // 路由重定向, 借助Navigate组件跳转
            element: <Navigate to="/home" replace/>
        }
    ]

4, 在app.js中导入路由配置函数useRoutes和路由配置数组routes
    import routes from './router/index';
    import { useRoutes } from "react-router-dom"

5, 在函数式组件app中创建路由出口
    const routerView = useRoutes(routes)

6, 在函数式组件app模板中渲染路由出口
    {routerView}

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

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