react-router 5.x路由配置

提示: 此教程使用react-router 5.x 版本实现

1.下载react的路由模块

npm install react-router-dom@5 --save

2. 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件
3. (注: 哈希模式用HashRouter 历史模式用BrowserRouter)

	import { HashRouter } from 'react-router-dom'
	ReactDOM.render(
  		<HashRouter >
    		<App />
    	</HashRouter >,
  		document.getElementById('root')
	);

3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route

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

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

export default function MyRouter(){
    	return(
	    	<Switch >
            	<Route exact path="/"  component={Home} />
				{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}
            	<Redirect from="/" to="/home" />
	        </Switch >
    	)
	}

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>