react-router 6.3 版本实现

提示: 此教程使用react-router 6.3 版本实现

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, 并从路由模块中导入工具组件Route

import { Routes, Route } from "react-router-dom";

4, 创建路由组件,配置路由, 并导出

export default function MyRouter(){
	return(
        <Routes >
        	<Route path="/" element={<Home/>} />
			<Route path="/login" element={<Login/>} />
			{/* router6的路由重定向写法 */}
        	<Route path="/abc" element={<Navigate to="/login" replace/>} />
        </Routes >
	)
}

5, 在app.js中导入路由组件

import RouterView from './router/index';

6, 在根组件app模板中添加路由组件,即路由出口

<RouterView></RouterView>

7, 在需要跳转的页面, 从路由模块导入工具组件 Link

import {Link} from 'react-router-dom'

8, 使用Link组件执行路由跳转

<Link to="/">首页/Link>

注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能