我有检查条件这样阵营路由器V4重定向不工作

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

当条件为真，但该组件没有被安装在网址变更后重定向的路径。其余的组件代码如下。

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包含与像THI

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

，当我直接在喜欢的“localhost：3000 /前奏”的浏览器中点击链接组件已成功安装，但是当它经过重定向它不显示组件。我如何解决它？

编辑

所以一个详细的失踪，我试图创建另一个项目重现该问题。我的应用组件是从观察者mobx反应的，它是出口如下图所示

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

我创造了这个回购与示例代码重现该问题，你可以用它 https://github.com/mdanishs/mobxtest/

所以当组件包装成mobx反应的观测重定向不工作别人正常工作

来源

2017-03-18 mdanishs

你在控制台中看到的任何错误？ –

@TharakaWijebandara在控制台中没有错误，事实上我只是用一个链接试过了，是不是工作压力太大。不知道发生了什么问题。 – mdanishs

提问者在GitHub上发布了一个issue，并得到这个显然未公开hidden guide（编辑：现在published），帮助我出去了。我在这里发布它是因为我遇到了同样的问题，并希望其他人避免我们的痛苦。

问题是，mobx-react和react-redux都提供了自己的shouldComponentUpdate()函数，只检查支持更改，但react-router通过上下文发送状态。当地点改变时，它不会改变任何道具，所以它不会触发更新。

解决这个问题的办法是通过位置向下做道具。上述指南列出几种方法可以做到这一点，但最简单的就是只是包装容器与withRouter()高阶组件：

export default withRouter(observer(MyComponent))

，或者对于终极版：

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

来源

2017-03-20 08:29:35 jct

你缺少/在介绍前

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

来源

2017-03-18 17:00:54

仍不能使用shouldComponentUpdate任何地方你（或一个lib您正在使用）工作 – mdanishs

？ https：//开头github上。com/ReactTraining/react-router/blob/v4/packages/react-router/docs/guides/blocked-updates.md –

哇，就是这样。我从接受的答案阅读各种文档，但我只需要一个'/':) – Sisir

组成时要小心路由器与其他部件，如翻译服务提供商，主题提供商等。一段时间后，我发现你的应用程序必须通过路由器进行严格的包装，像这样：

<Provider store={store}> 
    <ThemeProvider theme={theme}> 
    <TranslationProvider 
     namespaces={['Common', 'Rental']} 
     translations={translations} 
     defaultNS={'Common'} 
    > 
     <Router> 
     <App /> 
     </Router> 
    </TranslationProvider> 
    </ThemeProvider> 
</Provider>

希望这有助于有人

来源

2018-01-16 14:07:42 Kornelius

阵营路由器V4重定向不工作

编辑

回答

相关问题