react-router 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>