使用Reaction路由器V4以编程方式导航?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

刚刚换了react-router从第3节到第4节。

但是,我不知道如何以编程方式在Component...即在handleClick()函数

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

提问于
用户回答回答于

可以将它添加到项目中,如下所示:

yarn add react-router-dom

npm i -S react-router-dom

如果要自定义组件呈现输出,则需要将组件包装在函数中,并使用render选项,以便将所需的任何其他道具传递给组件,除了match,,,locationhistory. An example to illustrate:

import { BrowserRouter as Router } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

使用withRouter

这个高阶组件将注入与Route

import { withRouter } from 'react-router-dom'

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }).isRequired,
};

export default withRouter(ButtonToNavigate);

渲染<Redirect>将导航到一个新的位置。但要记住,默认情况下,当前位置被新的位置所取代,就像服务器端重定向(HTTP3xx)一样。新地点由to可以是字符串(重定向到的URL),也可以是location对象

<Redirect to="/your-new-location" push />

​仍然是一个试验性的api,它很可能会破坏/改变未来的Reaction版本。

const ButtonToNavigate = (props, context) => (
  <button
    type="button"
    onClick={() => context.router.history.push('/my-new-location')}
  >
    Navigate to a new location
  </button>
);

ButtonToNavigate.contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  }),
};

用户回答回答于

最简单的方法是:

this.props.history.push("/new/url")

扫码关注云+社区