React Router v4 Redirect无法正常工作

Question

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

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

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

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>
    );
  }

My App Component包含在BrowserRouter中,就像thi一样

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

当我直接在浏览器中点击url时,就像'localhost:3000/intro'组件成功安装,但是当它通过重定向时,它不会显示组件.我如何解决它？

编辑

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

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

我用一个示例代码创建了这个repo来重现你可以使用它的问题 https://github.com/mdanishs/mobxtest/

因此,当组件被包装到mobx-react观察器中时,重定向不起作用,否则它工作正常

Answer 1

提问者在GitHub上发布了一个问题,得到了这个显然未发表的隐藏指南(编辑:现已发布),这也帮助了我.我在这里张贴它是因为我遇到了同样的问题,并希望别人避免我们的痛苦.

问题是mobx-react和react-redux都提供了自己的shouldComponentUpdate()功能,只检查prop变化,但react-router通过上下文向下发送状态.当位置发生变化时,它不会更改任何道具,因此不会触发更新.

解决这个问题的方法是将该位置作为道具传递下去.上面的指南列出了几种方法,但最简单的方法是使用withRouter()更高阶的组件包装容器:

export default withRouter(observer(MyComponent))

或者,对于redux:

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

Answer 2

<Redirect />不应该在<Switch></Switch>标签内。

Answer 3

将 Router 与其他组件（如翻译提供程序、主题提供程序等）组合时要小心。 一段时间后，我发现您的应用程序必须由路由器严格包装，如下所示：

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

希望这可以帮助某人

Answer 4

您应该只Redirect使用render方法进行渲染：

render() {
  return (<Redirect to="/" />);
}

但是这是我最喜欢的解决方案，无需使用Redirect组件

1. 进口 import { withRouter } from 'react-router-dom';
   
2. export default withRouter(MyComponent);
3. 最后，在您的操作方法中，假设 handlingButtonClick

handlingButtonClick = () => {
  this.props.history.push("/") //doing redirect here.
}