javascript - React Router Dom(四)以编程方式导航

Question

我正在开发一个“远程控制”的 React 应用程序，并尝试通过 Pusher 连接该应用程序的选项卡导航。我正在使用 react-router-dom 并设置了与 Pusher 的连接以及它在 componentDidMount 中监听的 channel 。每次返回消息时，我都需要让应用程序更改 URL 导航，但无法弄清楚“推送”它的正确方法是什么。我在谷歌上搜索了很多关于以编程方式导航 react-router-dom 的线程，并尝试了 this.history.push()、this.props.history.push() 并且它总是抛出历史未定义的错误。监听器与路由本身位于同一组件中。

    import React, { Component } from 'react';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    import axios from 'axios';
    import Pusher from 'pusher-js';

    import Component1 from './Component1';
    import Component2 from './Component2';

    export default class AppRouter extends Component{

    componentDidMount() {
          const pusher = new Pusher('8675309', { cluster: 'us2', encrypted: true });
          const nav_channel = pusher.subscribe('nav');
          nav_channel.bind('message', data => { this.props.history.push(data.message) });
    }

...

render(){
    return(
      <Router>
        <Switch>
          <Route path='/path1' render={() => <Component1 navigate={this.handleNavChange} />} />
          <Route path="/path2" render={() => <Component2 navigate={this.handleNavChange} />} />

        </Switch>
      </Router>
    )
  }

    }

我需要应用程序在每次从另一个连接的应用程序收到消息时更改 URL 或路由，但我不知道如何让 react-router-dom (v4) 在与路由器本身相同的组件中执行此操作.任何信息或指向我的资源将不胜感激。

Answer 1

您需要使用 React-Router 中的 withRouter 装饰器来访问 match、location 和 history。

import { withRouter } from 'react-router'

导出时包裹你的组件

export default withRouter(yourComponent)

然后你就可以通过 Prop 访问历史。

https://reacttraining.com/react-router/core/api/withRouter