在React中渲染Redirect总是比使用this.props.history.push更好吗?

Ste*_*lay 7 redirect reactjs react-router

如果我总是重定向到应用内路由,那么Redirectreact-router-dom(v4)中的组件和this.props.history.push()?之间的区别是什么?

例如,假设我希望用户给定的标题添加到URL和重定向/foo/123/foo/123/some-title(均含有相同的路线/组件渲染).

我看到了Redirect传递状态的一些用途.这到底在哪里?

是否为反模式指定要在状态中重定向到的位置?为什么示例代码看起来不像这样:

save() {
  this.setState({ redir: '/new-path'; });
}
...
render () {
  if (this.state.redir) {
    return <Redirect to={this.state.redir} />;
  }
  ...
}
Run Code Online (Sandbox Code Playgroud)

Mar*_*aru 6

我是一个坚决反对渲染重定向的人,因为您必须渲染一个组件才能更改页面,这有点违反直觉,但它确实提供了一些明显的好处

所以问题this.props.history.push()主要在于您处理触发重定向的子组件时

Component A # the one Rendered by the Route
  Component B
    Component C # the one triggering the redirect
Run Code Online (Sandbox Code Playgroud)

在上面的例子中,除非你勤于将路由道具从Component Adown 传递到Component C,否则你将无法使用history.push()inComponent C

渲染Redirect应该是由 react-router 维护者提供的那个场景的答案,但有些人根本不喜欢这个想法(包括我)。


Functioanally说,有似乎没有在功能之间的重大分歧Redirect,并history.push为重定向使用它的引擎盖下。在 history.push 上使用 Redirect 的主要原因是 Redirect 可以从未来可能发生的关于历史如何工作的变化或如果他们决定在以后以不同的方式处理上下文进行验证。

  • 通过用 `withRouter` 包装你的组件,你可以访问任何层次结构级别的路由器道具 (2认同)
  • 是的,`Redirect` 在底层使用了 `history.push`。除了“重定向”之外,我认为两者之间没有任何主要的行为差异,因为“上下文”或“历史”对象的任何更改可能会或可能会在以后发生 (2认同)