2017-10-15 116 views
1

如果我总是重定向到应用内路由,那么react-router-dom(v4)中的Redirect组件和this.props.history.push()之间的区别是什么?在React中,渲染重定向比使用this.props.history.push总是更好?

E.g.假设我想将用户给定的标题添加到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} />; 
    } 
    ... 
} 

回答

0

我是人谁是坚决打击渲染重定向,因为它是一种违反直觉的,你必须为了改变页面但是它确实提供了一些渲染组件明显的好处

所以用this.props.history.push()的问题主要是,当你正在处理被触发子组件的例子重定向

Component A # the one Rendered by the Route 
    Component B 
    Component C# the one triggering the redirect 

以上,除非你是勤奋与传承路线道具Component A下降到Component C,那么你就无法在Component C

渲染Redirect使用history.push()应该是这个问题的答案是由反应路由器的维护提供,但那种情况下有些人只是不喜欢这个主意根本(包括我在内)。


Functioanally说,有似乎没有被Redirecthistory.push之间在功能上主要区别重定向使用它的引擎盖下。使用Redirect over history.push的主要原因是重定向未来可以从历史记录工作方式的可能变化中得到证明,或者他们决定在以后以不同的方式处理上下文。

+1

通过用'withRouter'封装你的组件,你可以在层次结构的任何级别访问路由器道具 –

+0

@ShubhamKhatri只要使用'withRouter'作为HOC的组件只使用历史记录推送,那么应该这不是一个问题。在我的情况下,我试图从使用'withRouter'的组件中访问'match',并且我没有得到我想要的结果 – Maru

+0

那么Redirect是否会在引擎盖下使用history.push?我想知道理想的行为差异。 –