修改

Question

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

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

当条件为true但未安装组件时，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')
);

当我直接在浏览器中点击网址时，例如本地主机：3000 /简介＆＃39;组件已成功安装，但当它通过重定向时，它不会显示该组件。我该如何解决？

修改

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

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

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

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

Answer 1

提问者在GitHub上发布了issue，并且显然未发布hidden guide（编辑：现在published）也帮助了我。我在这里发帖是因为我遇到了同样的问题，希望别人避免我们的痛苦。

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

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

export default withRouter(observer(MyComponent))

或者，对于redux：

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

Answer 2

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

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

希望这有助于某人

Answer 3

你在介绍前错过了/

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

Answer 4

您应仅在渲染方法中渲染Redirect

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

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

导入import { withRouter } from 'react-router-dom';
export default withRouter(MyComponent);
最后，在您的操作方法中，假设handlingButtonClick

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

Answer 5

我对<Redirct />有疑问，最后我发现<Redirect />必须不在<Switch></Switch>标记内。

Answer 6

您可以这样尝试：

首先：将“ withRouter”导入到这样的组件中：

import { withRouter } from "react-router-dom";

然后在组件出口组件的末尾，如下所示：

export default withRouter(VerifyCode);

然后可以将此代码添加到您的函数中：

 verify(e) {
    // after sever get 200
    this.props.history.push('/me/');
}

祝你好运

Answer 7

  const App = ({history}) =>{

  return history.push('/location')  }

Answer 8

<块引用>

添加“精确”以重定向?

示例：

<Switch>
   <Route exact path="/">
      <Redirect to="/home" />
   </Route>
<Switch>

React Router v4 Redirect无法正常工作

修改

8 个答案: