一、前言
相信常用 react 开发的小伙伴对于 react-router 这个库一定不会陌生，最近我在封装 axios 时遇到一个问题：如果 access_token 过期了，希望能够跳转到登陆页，这该怎么实现？
解决这个问题之前，让我们先来复习一下 react-router 的基础用法。
二、基础用法
1、安装
在项目目录下的控制台键入：
yarn add react-router-dom
2、配置
在我们的项目根目录，也就是 /src/App.js 中导入 BrowserRouter 和 Route 组件：
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Login from './pages/login';
import Home from './pages/home';
function App() {
return (
{/* BrowserRouter 只能有一个根节点，所以这里用个 div 包裹 */}
);
}
export default App;
3、使用 Link 组件跳转
例如在 Home 组件中我们需要点击按钮跳转至 Login 组件：
import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
class Home extends PureComponent {
render () {
return (
);
}
};
export default Home;
4、在 js 中控制跳转
事实上很多真实业务中并不会仅仅做一个跳转，我们希望能够在 js 执行到一定阶段时跳转：
import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
class Home extends PureComponent {
render () {
return (
);
}
handleClick = () => {
// ... your logic
this.props.history.push('/');
}
};
export default Home;
5、动态路由传参
在 /src/App.js 中新增 Detail 组件：
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Login from './pages/login';
import Home from './pages/home';
import Home from './pages/detail';
function App() {
return (
);
}
export default App;
因此我们使用 Link 组件的时候可以动态地传递参数值：
在 Detail 组件中获取参数只要：
this.props.match.params.id
5、非动态路由传参
有时候传递的参数不是 id 值并且比较多的情况（一般不会出现，都用 redux 了...），我们会使用url params 的方式传参。
先把 /src/App.js 中的路由改回来：
然后传递参数的时候只要：
我们在 /src/statics/js/utils.js 中封装好的工具方法 getUrlParam：
/**
* 获取地址栏参数
* @param name 参数名称
*/
export const getUrlParam = (name) => {
const regx = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
const result = window.location.search.substr(1).match(regx);
return result ? decodeURIComponent(result[2]) : null;
};
获取参数：
import * as utils from ‘/src/statics/js/utils’;
const value1 = utils.getUrlParam(value1);
const value2 = utils.getUrlParam(value2);
3、配合 react-loadable 使用
在我们使用 react-loadable 的时候，通常是这么写的：
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
// 这里改为从 loadable.js 中加载
import Login from './pages/login/loadable';
import Home from './pages/home/loadable';
function App() {
return (
);
}
export default App;
这时候，我们的代码就会神奇的报错：push is not a Function ，在 componentDidMount 里 console 一下 this.props 会发现里面并没有 history 属性。
这里需要引入 withRouter 方法，它把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上：
// /src/home/index.js
import React, { PureComponent } from 'react';
import { withRouter, Link } from 'react-router-dom';
class Home extends PureComponent {
render () {
return (
);
}
handleClick = () => {
// ... your logic
this.props.history.push('/');
}
};
// 使用 withRouter 包装 Home 组件
export default withRouter(Home);
四、在组件外部控制路由跳转
props 只有在组件中才能使用，我们的项目中通常会希望在组件外部能够控制路由跳转，这里提供以下几种解决方案：
1、传值
例如在使用 react-thunk 配合 react-redux 处理异步数据时，我们一般会统一使用一个 actionCreator 来处理异步代码，派发 action ，既然没有，那我们就传过去：
// /src/home/index.js
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import * as actionCreators from './store';
import { withRouter, Link } from 'react-router-dom';
class Home extends PureComponent {
render () {
// 从 this.props 中取 history
const { handleClick, history } = this.props;
return (
{/* 将 history 传给方法 handleClick */}
);
}
};
const mapState = (state) => ({});
const mapDispatch = (dispatch) => ({
handleClick (history) {
// 派发 actionCreators.getData() 时同时传入 history
dispatch(actionCreators.getData(history));
}
});
export default connect(mapState, mapDispatch)(withRouter(Home));
// /src/home/store/actionCreators.js
import axios from 'axios';
import * as constants from "./constants";
export const getData = (history) => {
return (dispatch) => {
axios.get('Your Interface Path').then(result => {
const res = result.data;
if (res.status === 'success') {
// ... your logic
// 跳转
history.push('/');
}
}).catch(err => {
console.log('error:', err);
});
};
};
2、无法传参的情况
很多时候并不会这么顺心如意，我们无法传参，例如：我们封装 localStorage 储存access_token 时，当 access_token 失效，我们希望能够跳回 Login 页。
localStorage 具体封装详见我的另一篇博客：
https://www.jianshu.com/p/ed1cc98916b3
// /src/statics/js/storage.js
get (key, callback = () => {}) {
let dataJSON = localStorage.getItem(key);
if(this.isNotExist(dataJSON)) {
return null;
}
let data = JSON.parse(dataJSON);
if(this.isNotExist(data.expired)) {
return data.value;
}
if(this.isOutPeriod(data)) {
this.del(key);
// localStorage 失效时执行回调
callback();
return null;
}
return data.value;
}
// /src/statics/js/history.js
// hack，在组件外部使用导航
const createHistory = require('history').createBrowserHistory;
export default createHistory();
// /src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
// 不再使用 BrowserRouter 组件，而使用 Router 组件
import { Router, Route } from 'react-router-dom';
// 引入刚刚创建的 history
import history from './statics/js/history';
import { Globalstyle } from './style';
import 'antd/dist/antd.css';
import Header from './common/header';
import Footer from './common/footer';
import Login from './pages/login/loadable';
import Home from './pages/home/loadable';
function App() {
return (
);
}
export default App;
// /src/statics/js/api.js
import axios from 'axios';
import { message } from 'antd';
import { localstorage } from './utils';
// 引入刚刚创建的 history
import history from './history';
// ... other logics
let build = (url, {method, params, data, headers, responseType}) => {
let token = localstorage.get('token', () => {
message.warning('access_token 已失效，请重新登陆！');
// 跳转
history.push('/');
});
let config = {
url,
method,
params,
headers: token ? extend({'x-access-token': token}, headers) : headers,
data,
responseType
}
return axios(extend(config, DEFAULT_AXIOS_CONFIG));
};
// ... other logics
注意：React Router 中文文档 中介绍了一种方法，
// your main file that renders a Router
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'
render(, el)
// somewhere like a redux/flux action file:
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')
在 react-router@4 中实测无效，应该是版本更新去除了这一方法，而中文文档更新有所延迟
四、结语
react-router@4 中推荐我们使用 BrowserRouter 组件，而我们的以上实现 又用回了 Router 组件，看了大佬的博客，推荐我们自己看源码写一个 BrowserRouter 组件，我没能实现，后面有机会自己尝试以下。同学们知道或是有兴趣的也可以自己试试，欢迎讨论！
希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！