javascript - React Router Dom（四）编程导航

问题描述

我正在开发一个“远程控制”的 React 应用程序，并试图通过 Pusher 连接应用程序的标签导航。我正在使用 react-router-dom 并设置了与 Pusher 的连接以及它在 componentDidMount 中侦听的通道。每次返回消息时，我都需要让应用程序更改 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) 在与路由器本身相同的组件中执行此操作。任何信息或指向我的资源将不胜感激。

标签： javascriptreactjsreact-routerpusherreact-router-dom

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

import { withRouter } from 'react-router'

导出时包装组件

export default withRouter(yourComponent)

然后您将可以从道具访问历史。

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

javascript - React Router Dom（四）编程导航

问题描述

解决方案

推荐阅读