Question

我正在学习React。我的React路由器代码如下所示

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />
        <PrivateRoute path="/dashboard" exact component={Dashboard} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')

我的私人路线如下

const PrivateRoute = ({ component: Component }) => (
    <Route
        render={props =>
            (Auth.isAuthenticated() ? ( <Component {...props} />) : (<Redirect to={{ pathname: '/',}}/>))
        }
    />
);

使用上述代码，我可以在登录（http://localhost:3000/）后浏览登录页面。但是成功登录后，如果有人尝试浏览登录页面，我需要重定向到dashboard页面。

我该怎么办？

Answer 1

创建类似于私人路线的仅访客路线。如果用户通过了身份验证，则重定向到仪表板，否则将呈现目标组件。

const VisitorOnlyRoute = ({ component: Component }) => (
    <Route
        render={props =>
            (Auth.isAuthenticated() === false? ( <Component {...props} />) : (<Redirect to={{ pathname: '/dashboard',}}/>))
        }
    />
);

现在将此路由组件与您的登录/注册组件一起使用，如下所示：

<VisitorOnlyRoute path="/register" exact component={Register} />

Answer 2

借助Route组件，您的Login组件将获得history道具，您可以使用该道具发起重定向。

登录成功后只需拨打history.push('/dashboard')。

/* In your `Login` component */
function doLogin() {
    somehowSendLoginApiRequest().((response) => {
        if (response.ok) {
            this.props.history.push('/dashboard');
        }
    });
}

在React中经过身份验证的导航

2 个答案: