React-router-dom的原理和使用介绍

路由配置一直是单页面应用里面很重要的一部分，本文就简单介绍一下

basename 为所有地址添加基础路径

这是一个很常见的需求，当产品要上线的时候，一个域名下有多个系统，那就需要在不同系统下分别统一路径。比如www.example.com/A/testA/与www.example.com/B/testB/，这样后端部署的时候也会很容易。

配置也很简单，只需要在BrowserRouter加上basename属性就行了

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
	<Provider store={store}>
		<BrowserRouter basename="/yourbasename/">
			<App />
		</BrowserRouter>
	</Provider>,
	document.getElementById('root')
);

注意：图片等文件等引入要用相对路径而不是绝对路径！

HashRouter 和 BrowserRouter

HashRouter是利用 url 里面的#去创建路由，当用户进入到www.example.com的时候，实际上看到的是www.example.com/#/

使用BrowserRouter时，则是指向真实的资源路径的。

Route 的 exact 属性

<Route path='/' component={Home} />
<Route path='/page' component={Page}>

如果代码像上面这样，如果路由匹配到path='/page'，那么会把Home也会展示出来。

也就是说路由path='/page'会匹配路由path='/'和路由path='/page'

那么该如何实现我们想要的效果呢？代码如下：

<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />

很简单，只需要加上 exact 属性就可以了。这样路由匹配到path='/page'，只会匹配到Page组件。

useHistory

useHistory 的使用方法也很简单：

import { useHistory } from 'react-router-dom';
let history = useHistory();
history.push('/home');

以后遇到路由方面的问题还会持续更新…

Donate