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>