提示: 此教程使用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