React Router v4 Redirect无法正常工作 [英] React Router v4 Redirect not working

问题描述

我有一条路线在检查完这样的条件后重定向

I have a route which redirects after checking a condition like this

<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/>

当条件为真但未装入组件时，URL会更改。组件代码的其余部分如下所示。

The url changes when the condition is true but the component is not mounted. The rest of the component code is as below.

render() {
    return (
      <div>
        ...
        <Route exact path="/" render={()=>(
          Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store} />         
        )} />
        <Route path="/intro" render={()=>(<IntroWizard state={Store.userInfo}/>)} />
        <Route path="/home" render={()=>(<Home state={Store}/>)} />
        <Route render={()=>(<h1>404 Not Found</h1>)} />
        <Footer />
      </div>
    );
  }

我的应用程序组件包含在BrowserRouter中，如同

My App Component is contained with in the BrowserRouter like thi

ReactDOM.render(<BrowserRouter>
    <App/>
</BrowserRouter>,
  document.getElementById('root')
);

当我直接在浏览器中点击url时，'localhost：3000 / intro'组件成功挂载，但当它通过重定向时，它不会显示该组件。我该如何解决？

when I hit the url directly in the browser like 'localhost:3000/intro' component is mounted successfully, but when it goes through the redirect it doesn't display the component. How do I fix it?

因此缺少一个细节，我尝试创建另一个项目来重现问题。
我的应用程序组件是来自mobx-react的观察者，它如下所示导出

So one detail was missing and I tried creating another project to reproduce the issue. My App component is a observer from mobx-react and it is exported as shown below

let App = observer(class App { ... })
export default App

我创建了这个仓库重现问题的示例代码，您可以使用它
https://github.com/mdanishs/mobxtest /

I have created this repo with a sample code to reproduce the issue you can use it https://github.com/mdanishs/mobxtest/

所以当组件被包装到mobx-react观察者中时，重定向不起作用，否则它工作正常

So when Components are wrapped into mobx-react observer the redirect is not working else it works fine

推荐答案

提问者发布了问题在GitHub上，显然未发表隐藏指南（编辑：现在已发布）也帮助了我。我在这里发布它是因为我遇到了同样的问题并且希望其他人避免我们的痛苦。

The asker posted an issue on GitHub, and got this apparently unpublished hidden guide (edit: now published) that helped me out too. I'm posting it here because I ran into the same problem and want others to avoid our pain.

问题是mobx-react和react-redux都提供了他们的拥有 shouldComponentUpdate（）仅检查prop更改的函数，但react-router通过上下文向下发送状态。当位置发生变化时，它不会改变任何道具，因此它不会触发更新。

The problem is that mobx-react and react-redux both supply their own shouldComponentUpdate() functions that only check for prop changes, but react-router sends state down through the context. When the location changes, it doesn't change any props, so it doesn't trigger an update.

解决这个问题的方法是将该位置作为道具传递下来。上面的指南列出了几种方法，但最简单的方法是用 withRouter（）更高阶组件包装容器：

The way around this is to pass the location down as a prop. The above guide lists several ways to do that, but the easiest is to just wrap the container with the withRouter() higher order component:

export default withRouter(observer(MyComponent))

或者，对于redux：

or, for redux:

export default withRouter(connect(mapStateToProps)(MyComponent))

这篇关于React Router v4 Redirect无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！