React Router Dom (4) Программная навигация

Question

Я работаю над приложением React с «дистанционным управлением» и пытаюсь подключить навигацию по вкладкам приложения через Pusher.Я использую response-router-dom и настроил свое соединение с Pusher и каналами, которые он слушает, в componentDidMount.Мне нужно, чтобы приложение меняло URL-навигацию каждый раз, когда возвращается сообщение, но я не могу понять, как правильно «толкнуть» его.У меня в Google много тем о программной навигации по response-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 или маршрутизацию каждый раз, когда сообщение получено от другого подключенного приложения, но я не могу понять, как заставить response-router-dom (v4) делать это втот же компонент, что и сам маршрутизатор.Любая информация или указание на ресурс будет принята с благодарностью.

Answer 1

Чтобы добавить ответ к 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 контекста нестабилен.См. Программная навигация с использованием реагирующего маршрутизатора и https://reactjs.org/docs/context.html#why-not-to-use-context.

.

Answer 2

Вам нужно использовать декоратор withRouter от React-Router, чтобы получить доступ к match, location и history.

import { withRouter } from 'react-router'

Оберните ваш компонент при экспорте

export default withRouter(yourComponent)

Тогда у вас будет доступ к истории из реквизита.

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