Question

一点背景。我正在使用Firebase身份验证（GitHub，Twitter和Facebook），当用户通过身份验证时，应用应该从Updater组件重定向到SocialButtonList组件。

现在我尝试在用户通过身份验证时使用重定向to: string，但由于某种原因无效，可能是我误解了文档。

我的顶级容器

const App = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path='/updater' component={Updater} />
          <Route exact path='/' component={Login} />
          <Route component={NoMatch}/>
        </Switch>
      </div>
    </Router>
  ); 
}

Login.js

const Home = () => {
  return (
    <Content align='center'>
      ...
      <SocialButtonList size={SOCIAL_BUTTON_SIZE_BIG} />
      ...
    </Content>
  );
}

SocialButtonList.js 此组件处理身份验证逻辑，在进行身份验证后，我致电authHandler，从此处我尝试重定向到“更新程序”。成分

authHandler = authData => {
  if (authData) {
    <Redirect to='/updater' />
    console.log('AUTHENTICATED');
  } else {
    console.info('User is signed out!');
  }
}

在控制台中，我可以看到AUTHENTICATED消息，但该应用不会重定向。如何正确地重定向到Updater组件？

更新我找到了一种使用withRouter重定向的方法。请参阅下面答案部分中的答案。

Answer 1

好吧，我使用withRouter代替Redirect

找到了答案

import { withRouter } from 'react-router-dom';
...
authHandler = authData => {
  if (authData) {
    //<Redirect to={Updater} />
    this.props.history.push('/updater');
    console.log('AUTHENTICATED');
  } else {
    console.info('User is signed out!');
  }
}
...
export default withRouter(SocialButtonList);

这已成功重定向到Updater组件。

现在我想知道，有没有办法让Redirect工作？

如何使用React Router 4正确重定向？

1 个答案: