使用 React 路由器以编程方式导航

╰+攻爆jí腚メ 2024-03-29 15:14 60阅读 0赞

## 问： ##

使用 react-router，我可以使用 Link 元素创建由 react 路由器本地处理的链接。

我在内部看到它调用 this.context.transitionTo(…)。

我想做一个导航。不是来自链接，而是来自下拉选择（例如）。我怎样才能在代码中做到这一点？ this.context 是什么？

我看到了 Navigation mixin，但是没有 mixins 我可以这样做吗？

## 答1: ##

> huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。

带有钩子的 React Router v5.1.0

如果您使用 React >16.8.0 和功能组件，React Router >5.1.0 中有一个新的 useHistory 钩子。

import {
         useHistory } from "react-router-dom";
    
    function HomeButton() {
        
      const history = useHistory();
    
      function handleClick() {
        
        history.push("/home");
      }
    
      return (
        
          Go home
        
      );
    }

反应路由器 v4

使用 React Router v4，您可以采用三种方法在组件内进行编程路由。

使用 withRouter 高阶组件。使用合成并渲染一个 使用上下文。

React Router 主要是对 history 库的封装。 history 使用浏览器的浏览器和哈希历史记录为您处理与浏览器的 window.history 的交互。它还提供了一个内存历史记录，这对于没有全局历史记录的环境很有用。这在移动应用程序开发 (react-native) 和使用 Node.js 的单元测试中特别有用。

history 实例有两种导航方法：push 和 replace。如果您将 history 视为已访问位置的数组，则 push 将向数组中添加一个新位置，而 replace 将用新位置替换数组中的当前位置。通常，您在导航时会希望使用 push 方法。

在早期版本的 React Router 中，您必须创建自己的 history 实例，但在 v4 中，、 和 组件将为您创建浏览器、哈希和内存实例。 React Router 使与您的路由器关联的 history 实例的属性和方法可通过上下文在 router 对象下使用。

1.使用withRouter高阶组件

withRouter 高阶组件将注入 history 对象作为组件的 prop。这允许您访问 push 和 replace 方法，而无需处理 context。

import {
         withRouter } from 'react-router-dom'
    // this also works with react-router-native
    
    const Button = withRouter(({
         history }) => (
       {
         history.push('/new-location') }}
      >
        Click Me!
      
    ))

1.  使用合成并渲染一个

组件不仅仅用于匹配位置。您可以渲染一条无路径路线，并且它将始终与当前位置匹配。 组件传递与 withRouter 相同的属性，因此您将能够通过 history 属性访问 history 方法。

import {
         Route } from 'react-router-dom'
    
    const Button = () => (
       (
         {
         history.push('/new-location') }}
        >
          Click Me!
        
      )} />
    )

1.  使用上下文\*

但你可能不应该

最后一个选项是只有在您对使用 React 的 context 模型感到满意时才应该使用的选项（React 的 Context API 从 v16 开始是稳定的）。

const Button = (props, context) => (
       {
        
          // context.history.push === history.push
          context.history.push('/new-location')
        }}
      >
        Click Me!
      
    )
    
    // you need to specify the context type so that it
    // is available within the component
    Button.contextTypes = {
        
      history: React.PropTypes.shape({
        
        push: React.PropTypes.func.isRequired
      })
    }

1 和 2 是实现起来最简单的选择，因此对于大多数用例来说，它们是您最好的选择。

`我尝试以这种方式使用方法1 withRouter(( { history } ) => { console.log("hhhhhhhh"); history.push('/bets') });但它从未与路由器 4 一起使用`

`什么！？我可以只使用 withRouter 而不是将 history 传递给我的所有组件？？ Gahh 我需要花更多时间阅读文档......`

`您如何在不将该行为附加到 Button 或其他 DOM 元素的情况下只运行 history.push('/new-location')？`

`从 react 16 起，context 不再是实验性的。`

`更新：对于那些使用 eact-router-dom v6 的人应该使用 useNavigate() 而不是 useHistory()。有关更多详细信息，请参阅以下答案。 stackoverflow.com/a/66971821/12572265`

## 答2: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

React-Router v6+ 答案

您可以使用新的 useNavigate 挂钩。 useNavigate 钩子返回一个可用于编程导航的函数。来自反应路由器 documentaion 的示例

import {
         useNavigate } from "react-router-dom";
    
    function SignupForm() {
        
      let navigate = useNavigate();
    
      async function handleSubmit(event) {
        
        event.preventDefault();
        await submitForm(event.target);
        navigate("../success", {
         replace: true });
      }
    
      return {
        /* ... */};
    }

React-Router 5.1.0+ 答案（使用钩子和 React >16.8）

您可以在功能组件上使用 useHistory 挂钩并以编程方式导航：

import {
         useHistory } from "react-router-dom";
    
    function HomeButton() {
        
      let history = useHistory();
      // use history.push('/some/path') here
    };

React-Router 4.0.0+ 答案

在 4.0 及更高版本中，使用历史记录作为组件的道具。

class Example extends React.Component {
        
       // use `this.props.history.push('/some/path')` here
    };

注意：如果 未呈现您的组件，则 this.props.history 不存在。您应该使用 在 YourComponent 中拥有 this.props.history

React-Router 3.0.0+ 答案

在 3.0 及更高版本中，使用路由器作为组件的道具。

class Example extends React.Component {
        
       // use `this.props.router.push('/some/path')` here
    };

React-Router 2.4.0+ 答案

在 2.4 及更高版本中，使用更高阶的组件来获取路由器作为组件的道具。

import {
         withRouter } from 'react-router';
    
    class Example extends React.Component {
        
       // use `this.props.router.push('/some/path')` here
    };
    
    // Export the decorated class
    var DecoratedExample = withRouter(Example);
    
    // PropTypes
    Example.propTypes = {
        
      router: React.PropTypes.shape({
        
        push: React.PropTypes.func.isRequired
      }).isRequired
    };

React-Router 2.0.0+ 答案

此版本向后兼容 1.x，因此无需升级指南。仅仅通过示例就足够了。

也就是说，如果您想切换到新模式，路由器内部有一个 browserHistory 模块，您可以使用它访问

import \{ browserHistory \} from ‘react-router’

现在您可以访问浏览器历史记录，因此您可以执行推送、替换等操作……例如：

browserHistory.push(‘/some/path’)

进一步阅读：Histories 和 Navigation

React-Router 1.xx 答案

我不会详细介绍升级细节。您可以在 Upgrade Guide

这里关于问题的主要变化是从 Navigation mixin 到 History 的变化。现在它正在使用浏览器 historyAPI 来更改路由，所以从现在开始我们将使用 pushState()。

下面是一个使用 Mixin 的例子：

var Example = React.createClass({
        
      mixins: [ History ],
      navigateToHelpPage () {
        
        this.history.pushState(null, `/help`);
      }
    })

请注意，此 History 来自 rackt/history 项目。不是来自 React-Router 本身。

如果您出于某种原因不想使用 Mixin（可能是因为 ES6 类），那么您可以从 this.props.history 访问从路由器获得的历史记录。只有路由器渲染的组件才能访问它。因此，如果您想在任何子组件中使用它，则需要通过 props 作为属性向下传递。

您可以在他们的 1.0.x documentation 上阅读有关新版本的更多信息

这里是a help page specifically about navigating outside your component

它建议获取参考 history = createHistory() 并在其上调用 replaceState。

React-Router 0.13.x 答案

我遇到了同样的问题，只能使用 react-router 附带的 Navigation mixin 找到解决方案。

我是这样做的

import React from 'react';
    import {
        Navigation} from 'react-router';
    
    let Authentication = React.createClass({
        
      mixins: [Navigation],
    
      handleClick(e) {
        
        e.preventDefault();
    
        this.transitionTo('/');
      },
    
      render(){
        
        return (Click me!);
      }
    });

我能够调用 transitionTo() 而无需访问 .context

或者你可以试试花哨的 ES6 class

import React from 'react';
    
    export default class Authentication extends React.Component {
        
      constructor(props) {
        
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick(e) {
        
        e.preventDefault();
    
        this.context.router.transitionTo('/');
      }
    
      render(){
        
        return (Click me!);
      }
    }
    
    Authentication.contextTypes = {
        
      router: React.PropTypes.func.isRequired
    };

React-Router-Redux 注意：如果你使用的是 Redux，还有另一个名为 React-Router-Redux 的项目为你提供了 ReactRouter 的 redux 绑定，使用的方法与 React-Redux 的做法有些相同

React-Router-Redux 有一些可用的方法允许从内部动作创建者进行简单的导航。这些对于在 React Native 中拥有现有架构的人特别有用，并且他们希望在 React Web 中以最小的样板开销使用相同的模式。

探索以下方法：

推（位置）

替换（位置）

去（数）

回去（）

直走（）

以下是使用 Redux-Thunk 的示例：

./actioncreators.js

import {
         goBack } from 'react-router-redux'
    
    export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.js

{
        
        e.preventDefault()
        this.props.onBackPress()
      }}
    >
      CANCEL

`太感谢了。文档很难搜索，即使您知道要查找的内容，在 useNavigate 函数中使用 replace 的简单和有用的功能也很难找到。`

`我希望 useNavigate 是解决方案，但 6.2.1 版本似乎忽略了 { replace: true } 并且不刷新页面。`

`docs 不清楚包含第二个可选参数 replace: state 的目的或预期行为。`

`有没有不使用钩子的解决方案？`

## 答3: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

反应路由器 v2

对于最新版本 (v2.0.0-rc5)，推荐的导航方法是直接推送到历史单例。您可以在 Navigating outside of Components doc 中看到这一点。

相关摘录：

import {
         browserHistory } from 'react-router';
    browserHistory.push('/some/path');

如果使用较新的 react-router API，您需要在组件内部使用 this.props 中的 history，以便：

this.props.history.push('/some/path');

它还提供 pushState，但根据记录的警告已弃用。

如果使用 react-router-redux，它会提供一个 push 函数，您可以像这样调度：

import {
         push } from 'react-router-redux';
    this.props.dispatch(push('/some/path'));

但是，这可能仅用于更改 URL，而不是实际导航到页面。

`不要忘记较新的 API 不使用 import { browserHistory } from './react-router'，而是使用 import createBrowserHistory from 'history/lib/createBrowserHistory' 创建历史记录。稍后，您可以从 components 属性访问 history：this.props.history('/some/path')`

## 答4: ##

> huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。

React-Router 4.x 答案

就我而言，我喜欢拥有一个甚至可以在外部组件中携带的历史对象。我喜欢有一个单独的 history.js 文件，我可以按需导入，然后对其进行操作。

您只需将 BrowserRouter 更改为 Router，并指定 history 属性。这对您没有任何改变，只是您拥有自己的历史对象，您可以根据需要进行操作。

您需要安装 react-router 使用的库 history。

示例用法，ES6 表示法：

历史.js

import createBrowserHistory from 'history/createBrowserHistory'
    export default createBrowserHistory()

基本组件.js

import React, {
         Component } from 'react';
    import history from './history';
    
    class BasicComponent extends Component {
        
    
        goToIndex(e){
        
            e.preventDefault();
            history.push('/');
        }
    
        render(){
        
            return Previous;
        }
    }

如果您必须从实际从 Route 组件呈现的组件导航，您还可以从 props 访问历史记录，如下所示：

基本组件.js

import React, {
         Component } from 'react';
    
    class BasicComponent extends Component {
        
    
        navigate(e){
        
            e.preventDefault();
            this.props.history.push('/url');
        }
    
        render(){
        
            return Previous;
        }
    }

## 答5: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

以下是使用 react-router v2.0.0 和 ES6 执行此操作的方法。 react-router 已远离 mixins。

import React from 'react';
    
    export default class MyComponent extends React.Component {
        
      navigateToPage = () => {
        
        this.context.router.push('/my-route')
      };
    
      render() {
        
        return (
          Go!
        );
      }
    }
    
    MyComponent.contextTypes = {
        
      router: React.PropTypes.object.isRequired
    }

## 答6: ##

> huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

对于这个，谁不控制服务器端，因此使用哈希路由器 v2：

将您的 history 放入单独的文件（例如 app\_history.js ES6）：

import {
         useRouterHistory } from 'react-router'
    import {
         createHashHistory } from 'history'
    const appHistory = useRouterHistory(createHashHistory)({
         queryKey: false });
    
    export default appHistory;

并在任何地方使用它！

react-router (app.js ES6) 的入口点：

import React from 'react'
    import {
         render } from 'react-dom'
    import {
         Router, Route, Redirect } from 'react-router'
    import appHistory from './app_history'
    ...
    const render((
      
      ...
      
    ), document.querySelector('[data-role="app"]'));

您在任何组件中的导航（ES6）：

import appHistory from '../app_history'
    ...
    ajaxLogin('/login', (err, data) => {
        
      if (err) {
        
        console.error(err); // login failed
      } else {
        
        // logged in
        appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
      }
    })

## 答7: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

反应路由器 v6

我有一段时间没有接触 React，但要感谢并强调 the comment below by Shimrit Snapir：

在 React-Router 6.0 上 更改为

反应路由器 V4

tl：博士；

if (navigate) {
        
      return 
    }

简单而明确的答案是您需要将 与 setState() 结合使用

push: boolean - 如果为 true，重定向会将新条目推送到历史记录中，而不是替换当前条目。

import {
         Redirect } from 'react-router'
    
    class FooBar extends React.Component {
        
      state = {
        
        navigate: false
      }
    
      render() {
        
        const {
         navigate } = this.state
    
        // Here is the important part
        if (navigate) {
        
          return 
        }
       // ^^^^^^^^^^^^^^^^^^^^^^^
    
        return (
          
             this.setState({
         navigate: true })}>
              Home
            
          
        )
      }
    }

一个完整的例子是 here。阅读更多here。

PS。该示例使用 ES7+ Property Initializers 来初始化状态。如果您有兴趣，也可以看看 here。

## 答8: ##

> huntsbot.com – 高效赚钱，自由工作

警告：此答案仅涵盖 1.0 之前的 ReactRouter 版本，之后我将使用 1.0.0-rc1 用例更新此答案！

你也可以在没有 mixins 的情况下做到这一点。

上下文的问题是除非您在类上定义 contextTypes，否则它是不可访问的。

至于什么是上下文，它是一个对象，就像 props 一样，从 parent 传给 child，但它是隐式传递的，不需要每次都重新声明 props。请参阅https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

## 答9: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

这是最简单和最干净的方法，大约是当前的 React-Router 3.0.0 和 ES6：

带有 ES6 的 React-Router 3.xx：

import {
         withRouter } from 'react-router';
    
    class Example extends React.Component {
        
       // use `this.props.router.push('/some/path')` here
    };
    
    // Export the decorated class
    export default withRouter(Example);

或者，如果它不是您的默认类，则导出如下：

withRouter(Example);
    export {
         Example };

请注意，在 3.xx 中， 组件本身正在使用 router.push，因此您可以传递任何传递 <Link to= 标记的内容，例如：

this.props.router.push({
        pathname: '/some/path', query: {
        key1: 'val1', key2: 'val2'})'

## 答10: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

要以编程方式进行导航，您需要将新的 history 推送到 component 中的 props.history，这样可以为您完成工作：

//using ES6
    import React from 'react';
    
    class App extends React.Component {
        
    
      constructor(props) {
        
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick(e) {
        
        e.preventDefault()
        /* Look at here, you can add it here */
        this.props.history.push('/redirected');
      }
    
      render() {
        
        return (
          
            
              Redirect!!!
            
          
        )
      }
    }
    
    export default App;

## 答11: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

对于 ES6 + React 组件，以下解决方案对我有用。

我跟随 Felippe skinner，但添加了端到端的解决方案来帮助像我这样的初学者。

以下是我使用的版本：

“反应路由器”：“^2.7.0” “反应”：“^15.3.1”

下面是我使用 react-router 编程导航的反应组件：

import React from 'react';
    
    class loginComp extends React.Component {
        
       constructor( context) {
        
        super(context);
        this.state = {
        
          uname: '',
          pwd: ''
        };
      }
    
      redirectToMainPage(){
        
            this.context.router.replace('/home');
      }
    
      render(){
        
        return 
               // skipping html code 
                 Redirect
        ;
      }
    };
    
     loginComp.contextTypes = {
        
        router: React.PropTypes.object.isRequired
     }
    
     module.exports = loginComp;

下面是我的路由器的配置：

import {
         Router, Route, IndexRedirect, browserHistory } from 'react-router'
    
     render(
              
                
                
                
                
                
              
            , document.getElementById('root'));

原文链接：[https://www.huntsbot.com/qa/4lR8/programmatically-navigate-using-react-router?lang=zh\_CN&from=csdn][https_www.huntsbot.com_qa_4lR8_programmatically-navigate-using-react-router_lang_zh_CN_from_csdn]

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

[https_www.huntsbot.com_qa_4lR8_programmatically-navigate-using-react-router_lang_zh_CN_from_csdn]: https://www.huntsbot.com/qa/4lR8/programmatically-navigate-using-react-router?lang=zh_CN&from=csdn