4.React路由6.0+hooks配置

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

1, 下载react的路由模块(默认最新6.5)
    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 Home from "../pages/Home/Home"
    import User from "../pages/User/User"
    export default [
    {
        path: '/',
        element: <Home />
    },
    {
        path: '/user',
        element: <User />
    }
]

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>

注: 关于路由对象传值的更新
v5:  <Link to={{pathname:'/user', data:{}}}   接收: props.location.data   data名自定义
v6:  <NavLink to="/user" state={{name:'吴亦凡'}}  接收: props.location.state  state名固定

关于路由监听
import {useEffect} from "react"
useEffect(()=>{
    console.log("路由监听", location.pathname)
},[location])

博客:https://blog.csdn.net/qq_45799465/article/details/124257523