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