React-router:如何手动调用链接?


131

我是ReactJS和React-Router的新手。我有一个组件,通过props <Link/>react-router接收一个对象。每当用户单击该组件内部的“下一步”按钮时,我都想<Link/>手动调用对象。

现在,我正在使用refs访问支持实例,并手动单击<Link/>生成的'a'标记。

问题:有没有办法手动调用链接(例如this.props.next.go)?

这是我目前的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

这是我想要的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
         ...
      );
   }
});
...

Answers:


199

React Router v4-重定向组件(更新2017/04/15)

v4推荐的方法是允许您的render方法捕获重定向。使用state或props确定是否需要显示重定向组件(然后触发重定向)。

import { Redirect } from 'react-router';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />;
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

参考:https : //reacttraining.com/react-router/web/api/Redirect

React Router v4-参考路由器上下文

您还可以利用Router暴露给React组件的上下文。

static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}

这就是<Redirect />引擎盖下的工作方式。

参考:https : //github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4-外部更改历史记录对象

如果仍然需要执行与v2的实现类似的操作,则可以创建的副本,BrowserRouter然后将暴露history为可导出常量。以下是一个基本示例,但是您可以根据需要将其组合为可自定义的道具。有一些关于生命周期的警告,但就像在v2中一样,它应该始终重新渲染路由器。这对于从动作功能发出API请求后的重定向很有用。

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');

最新BrowserRouter扩展:https : //github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

将新状态推送到browserHistory实例:

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

参考:https : //github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md


7
hashHistory.push('/ sample'); 如果您使用的是hashHistory而不是browserHistory
sanath_p 2016年

1
这在material-ui库中特别有用,因为使用containerElement = {<链接到=“ /” />}并不总是调用该链接
Vishal Disawar

2
请注意,使用重定向选项时,您必须指定推送(即<Redirect push />)。默认情况下,它将执行替换操作,该替换操作与手动调用链接完全不同
aw04

1
@jokab可以使用<NavLink />而不是<LINK /> github.com/ReactTraining/react-router/blob/master/packages/...
马特罗

1
重定向对我不起作用,但是withRouter的aw04解决方案更简单并且可以工作
stackdave

90

React Router 4包含withRouter HOC,可让您history通过this.props以下方式访问对象:

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

class Foo extends Component {
  constructor(props) {
    super(props)

    this.goHome = this.goHome.bind(this)
  }

  goHome() {
    this.props.history.push('/')
  }

  render() {
    <div className="foo">
      <button onClick={this.goHome} />
    </div>
  }
}

export default withRouter(Foo)

9
这对我有用,看起来像是最简单的解决方案。
Rubycut

5
这是最好的解决方案。我不明白为什么投票这么少。
Benoit

1
是的,您可以单击几次链接,并且浏览器后退将不起作用。您需要单击几次浏览器才能真正返回
Vladyslav Tereshyn

@VladyslavTereshyn,您可以添加一些条件逻辑:if(((this.props.location.pathname + this.props.location.search)!== navigationToPath){...}
MattWeiler

15

5.x版中,您可以使用以下useHistory钩子react-router-dom

// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

这是最好的解决方案。如果添加一些条件逻辑,则可以避免用户多次单击同一按钮时在历史记录中重复输入:if ((routerHistory.location.pathname + routerHistory.location.search) !== navigateToPath) { routerHistory.push(navigateToPath); }
MattWeiler,

我需要声明history变量,useHistory().push挂钩规则不允许目录调用
onmyway133

这似乎是最现代的反应式解决方案。
Youngjae

8

https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50

或者甚至可以尝试执行onClick这个(更暴力的解决方案):

window.location.assign("/sample");

随着代码行的更改,如果您复制详细信息并在此处解释您的答案,则答案会更好。另外,assign它不是属性,而是函数。
WiredPrairie

(但是您仍然只有指向文件特定行的链接)。请在回答中包括具体建议,而不仅仅是链接。
WiredPrairie 2015年

感谢您的回答@grechut。但是,我想确保文档完全不了解路由器。我期望的行为是:“如果用户单击向右箭头,则调用下一个函数”。下一个功能可能是链接还是没有链接。
艾伦·索萨

我在React之外处理了一些页面(带有FB和Google重定向的登录屏幕),所以我在导航中需要这些页面,因为“ browserHistory.push('/ home');” 仅更改了URL,无法路由页面。谢谢。
Deborah

7
这将重新加载页面@grechut,这对于具有React Router的应用程序来说不是期望的行为。
艾比斯(Abhas)'17

2

好的,我认为我能够为此找到合适的解决方案。

现在,而不是发送<Link/>道具,以文件,我送<NextLink/>这是一个自定义包装的反应,路由器链路。这样,我就可以将右箭头作为Link结构的一部分,同时仍然避免在Document对象中包含路由代码。

更新后的代码如下所示:

//in NextLink.js
var React = require('react');
var Right = require('./Right');

var NextLink = React.createClass({
    propTypes: {
        link: React.PropTypes.node.isRequired
    },

    contextTypes: {
        transitionTo: React.PropTypes.func.isRequired
    },

    _onClickRight: function() {
        this.context.transitionTo(this.props.link.props.to);
    },

    render: function() {
        return (
            <div>
                {this.props.link}
                <Right onClick={this._onClickRight} />
            </div>  
        );
    }
});

module.exports = NextLink;

...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div>{this.props.next}</div>
         ...
      );
   }
});
...

PS:如果您使用的是最新版本的react-router,则可能需要使用this.context.router.transitionTo而不是this.context.transitionTo。该代码对于React-Router版本0.12.X可以正常工作。


2

反应路由器4

您可以通过v4中的上下文轻松调用push方法:

this.context.router.push(this.props.exitPath);

上下文在哪里:

static contextTypes = {
    router: React.PropTypes.object,
};

使用BrowserRouter,我的组件的上下文对象不包含router对象。我做错什么了吗?
pilau

您是否正在组件中设置上下文(上面的第二个块)?
克里斯(Chris

感谢您的参与!最终这个工作对我来说: router: React.PropTypes.object.isRequired。我不知道为什么没有isRequired钥匙就无法使用。另外,<Link>似乎能够获取history上下文,但是我无法复制它。
pilau

有趣的是-如果您放上代码笔,如果您仍然卡住,我可以帮助您对其进行调试
克里斯

看来您可以this.props.history.push()在React Router v4中使用。我只是通过检查React Router传递的道具发现了这一点。这似乎可行,但我不确定这是否是个好主意。
sean_j_roberts

-1

再次这是JS :)仍然有效..

var linkToClick = document.getElementById('something');
linkToClick.click();

<Link id="something" to={/somewhaere}> the link </Link>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.