React Router v4重定向不起作用

  • Z时代
  • 2024-01-10
  • 分类：问答

检查这样的情况后，我有一条重定向的路线

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

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

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

当我在浏览器中直接命中url时，例如’localhost：3000 / intro’组件已成功安装，但是当它通过重定向时，它不会显示该组件。我如何解决它？

编辑

因此缺少一个细节，我尝试创建另一个项目来重现该问题。我的App组件是mobx-react的观察者，并且如下所示导出

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

我已经用示例代码创建了这个仓库，以重现您可以使用它的问题

https://github.com/mdanishs/mobxtest/

因此，当组件包装到mobx反应观察器中时，重定向不起作用，否则它将正常工作

回答：

询问者在GitHub上发布了一个问题，并获得了这份显然未发布的隐藏指南（编辑：现已发布），该指南也对我有所帮助。我将其发布在这里是因为我遇到了同样的问题，希望其他人避免我们的痛苦。

问题在于，mobx-react和react-

redux都提供了它们自己的shouldComponentUpdate()功能，这些功能仅检查道具更改，但是react-

router通过上下文向下发送状态。位置更改时，它不会更改任何道具，因此不会触发更新。

解决此问题的方法是将位置向下传递为道具。上面的指南列出了执行此操作的几种方法，但最简单的方法是仅将容器包装成具有withRouter()较高顺序的组件：

export default withRouter(observer(MyComponent))

或者，对于redux：

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

以上是 React Router v4重定向不起作用 的全部内容， 来源链接： utcz.com/qa/413976.html

回到顶部