小编典典

React-router：如何手动调用链接？

reactjs

我是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>
         ...
      );
   }
});
...

阅读 318

2020-07-22

共1个答案

小编典典

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

2020-07-22