React Router v4 重定向不起作用 [英] React Router v4 Redirect not working

问题描述

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

<路由精确路径=/";渲染={()=>(Store.isFirstTime ?<重定向到=介绍"/>:<家庭状态={商店}/>)}/>

当条件为真但组件未挂载时，url 会更改.其余的组件代码如下.

render() {返回 (<div>...<路由精确路径="/";渲染={()=>(Store.isFirstTime ?<重定向到=介绍"/>:<家庭状态={商店}/>)}/><路由路径="/intro";render={()=>()}/><路由路径=/home"render={()=>()}/><Route render={()=>(<h1>404 Not Found</h1>)}/><页脚/>

);}

我的应用组件包含在 BrowserRouter 中，就像这样

ReactDOM.render(<应用程序/></BrowserRouter>,document.getElementById('root'));

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

编辑

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

let App = observer(class App { ... })导出默认应用

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

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

解决方案

提问者发布了一个 在 GitHub 上发布，并且显然未发布隐藏指南(现在 已发布)也帮助了我.我在这里发布它是因为我遇到了同样的问题并希望其他人避免我们的痛苦.

问题在于 mobx-react 和 react-redux 都提供了自己的 shouldComponentUpdate() 函数，这些函数只检查 prop 的变化，但是 react-router 通过上下文向下发送状态.当位置改变时，它不会改变任何道具，所以它不会触发更新.

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

导出默认 withRouter(observer(MyComponent))

或者，对于 redux:

导出默认 withRouter(connect(mapStateToProps)(MyComponent))

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

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

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

My App Component is contained with in the BrowserRouter like thi

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

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?

Edit

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

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

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

解决方案

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.

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.

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

or, for redux:

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

这篇关于React Router v4 重定向不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！