简述react-router-dom的用法

在react项目开发过程中经常会遇到，页面跳转之类的路由相关事件，为了更好的处理这些需要运用到react路由相关的一些包。

包括： react-router、react-router-dom、react-router-native

• react-router，只实现了路由的核心功能

• react-router-dom，基于react-router，加入了一些浏览器运行环境下的一些功能，例如:Link组件，会渲染一个a标签。BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

• react-router-native，基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。

本文主要介绍react在SPA web开发中的路由，即使用react-router-dom解决的路由问题。

react-router-dom快速使用

首先在SPA web开发中，需要进行路由于页面匹配，即需要让页面与地址一一匹配起来。

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import ErrorPage from './pages/ErrorPage/ErrorPage'; //相当于404页面 
class App extends Component {
	render(){
		return (
			<Router>
				<Switch>
					<Route path='/' component={Home} exact>
					<Route path='/about' component={About}>
					<Route component={ErrorPage}>
				</Switch>
			</Router>
		);
	}
}
export default App;

其中，Route对应的就是页面，其中的path属性对应的时地址。如：http://localhost:3000时会显示Home页面，当访问http://localhost:3000/about时会访问About页面。其中的exact为严格匹配，即未添加该属性时，无论访问http://localhost:3000还是http://localhost:3000/about都会展示出Home页面内容。

可能还需要使用到导航栏

如在Home页面中存在导航栏

import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import Style from './Home.module.css'; //在create-react-app创建的项目中这个代表css模块化，即当前css无论如何命名均不影响其他地方相同名称的结构的样式。
class Home extends Component {
	render(){
		return (
			<div>
				<NavLink
					to='/'
					className={Style.navLink}
	                activeClassName={Style.active}
                >
	                首页
				</NavLink>
				<NavLink to='/about' className={Style.navLink}>
					关于
				</NavLink>
			</div>
		);
	}
}
export default Home;

NavLink，用于设置导航链接，其中的activeClassName属性用于设置激活时匹配的样式

需要使用到普通的链接跳转

普通链接跳转直接使用Link组件，或者a标签

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class Test extends Component {
	render (){
		return (
			<div>
				<Link to='/test'>Link跳转</Link>
				<a href='/test'>a标签跳转</a>
			</div>
		);
	}
}
export default Test;

需要使用到后退按钮

后退按钮可以使用普通按钮，并为其加上点击事。可以使用window.history.back()，或者this.props.history.goBack()

import React, {Component} from 'react';
class Test extends Component {
	constructor(props){
		super(props);
	}
	handleClick1 = ()=>{
		window.history.back();
	}
	handleClick2 = ()=>{
		this.props.history.goBack();
	}
	render (){
		return (
			<div>
				<button onClick={this.handleClick1}>button1</button>
				<button onClick={this.handleClick2}>button2</button>
			</div>
		);
	}
}
export default Test;

需要注意如果使用this.props.history.goBack()后退，组件初始化时继承父组件的props。