React Router Dom (4) 以编程方式导航

Question

我正在开发一个 'remote controlled' 的 React 应用程序，我正在尝试通过 Pusher 连接该应用程序的选项卡导航。我正在使用 react-router-dom 并设置了与 Pusher 的连接以及它在 componentDidMount 中监听的通道。每次返回消息时，我都需要让应用程序更改 URL 导航，但无法弄清楚 'push' 的正确方法是什么。我有 google 很多关于以编程方式导航 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)

然后你就可以通过道具访问历史了。

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

Answer 2

添加到 andrewgi 的回答中：

在您的组件或父组件上使用 withRouter() 后，在您的组件中尝试以下代码：

static contextTypes = {
    router: PropTypes.object,
    location: PropTypes.object
}

这些应该都定义好了，你可以试试console.log(this.context.router, this.context.location)

然后，要以编程方式导航，请调用

this.context.router.history.push('/someRoute');

注意：上下文 API 不稳定。参见 and https://reactjs.org/docs/context.html#why-not-to-use-context。

React Router Dom (4) 以编程方式导航

React Router Dom (4) Programmatically Navigate

javascript

pusher

reactjs

react-router

react-router-dom