使用react-router-dom在组件外部控制路由跳转

一、前言

相信常用 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 (
    <div className="App">
      <BrowserRouter>
        {/* BrowserRouter 只能有一个根节点，所以这里用个 div 包裹 */}
        <div>
          <Header />
          {/* exact 表示精确匹配
            * 如果不加，则 /home 会同时匹配成功 / 和 /home ，导致渲染两个组件
            */}
          <Route path='/' exact component={ Login } />
          <Route path='/home' exact component={ Home } />
          <Footer />
        </div>
      </BrowserRouter>
    </Provider>
  );
}

export default App;


3、使用 Link 组件跳转

例如在 Home 组件中我们需要点击按钮跳转至 Login 组件：

import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';

class Home extends PureComponent {
  render () {
    return (
      <div className='home'>
        <Link to='/'>
          <Button>click</Button>
        </Link>
      </div>
    );
  }
};

export default Home;


4、在 js 中控制跳转

事实上很多真实业务中并不会仅仅做一个跳转，我们希望能够在 js 执行到一定阶段时跳转：

import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';

class Home extends PureComponent {
  render () {
    return (
      <div className='home'>
        <Button onClick={ this.handleClick }>click</Button>
      </div>
    );
  }
 
  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 (
    <div className="App">
      <BrowserRouter>
        <div>
          <Header />
          <Route path='/' exact component={ Login } />
          <Route path='/home' exact component={ Home } />
           {/* :id 表示可以匹配类似 /detail/1 的路由 */}
          <Route path='/detail/:id' exact component={ Home } />
          <Footer />
        </div>
      </BrowserRouter>
    </Provider>
  );
}

export default App;

因此我们使用 Link 组件的时候可以动态地传递参数值：

<Link to={ `/detail/${item.id}` }></Link>

在 Detail 组件中获取参数只要：

this.props.match.params.id


5、非动态路由传参

有时候传递的参数不是 id 值并且比较多的情况（一般不会出现，都用 redux 了...），我们会使用url params 的方式传参。
先把 /src/App.js 中的路由改回来：

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

然后传递参数的时候只要：

<Link to={ `/detail?key1=${value}&key2=${value2}` }></Link>

我们在 /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 (
    <div className="App">
      <BrowserRouter>
        <div>
          <Header />
          <Route path='/' exact component={ Login } />
          <Route path='/home' exact component={ Home } />
          <Footer />
        </div>
      </BrowserRouter>
    </Provider>
  );
}

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 (
      <div className='home'>
        <Button onClick={ this.handleClick }>click</Button>
      </div>
    );
  }
 
  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 (
      <div className='home'>
        {/* 将 history 传给方法 handleClick */}
        <Button onClick={ () => handleClick(history) }>click</Button>
      </div>
    );
  }
};

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 (
    <Provider className="App" store={ store }>
      <Globalstyle />
      {/* 不再使用 BrowserRouter 组件，而使用 Router 组件，同时传入 history */}
      <Router history={ history }>
        <div>
          <Header />
          <Route path='/' exact component={ Login } />
          <Route path='/home' exact component={ Home } />
          <Footer />
        </div>
      </Router>
    </Provider>
  );
}

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(<Router history={browserHistory} routes={routes}/>, 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 组件，我没能实现，后面有机会自己尝试以下。同学们知道或是有兴趣的也可以自己试试，欢迎讨论！
希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342