React Router Dom（四）编程导航

Posted 2023-02-22

【中文标题】React Router Dom（四）编程导航

【英文标题】：React Router Dom (4) Programmatically Navigate

【发布时间】：2018-11-09 09:44:41

【问题描述】：

我正在开发一个“远程控制”的 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) 在与路由器本身相同的组件中执行此操作.任何信息或指向我的资源将不胜感激。

【参考方案1】：

补充安德鲁吉的答案：

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

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

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

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

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

注意：上下文 API 不稳定。见Programmatically navigate using react router 和https://reactjs.org/docs/context.html#why-not-to-use-context。

【参考方案2】：

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

import  withRouter  from 'react-router'

导出时包装组件

export default withRouter(yourComponent)

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

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

【讨论】：

谢谢！所以我不能在拥有路由器本身的同一个组件中做到这一点？当我尝试使用 withRouter(AppRouter)

导出我的组件时，我收到“您不应该在 之外使用 或 withRouter()”

乐于助人。这是正确的。它仅用于组件 1 或组件 2，如您的示例所示。