Reactjs 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: '/',}}/>))
        }
    />
);

ReactDOM.render(
,
document.getElementById（'root'））

我的私人路线如下

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: '/',}}/>))
        }
    />
);

const privaterote=（{component:component}）=>(
（Auth.isAuthenticated（）？（）：（））
}
/>
);

使用上面的代码，我可以在登录（）后浏览登录页面。但成功登录后，如果有人试图浏览登录页面，我需要重定向到

仪表板

页面

---

如何操作？

创建一个类似于专用路由的访客专用路由。如果用户经过身份验证，则重定向到仪表板，否则呈现目标组件

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

const VisitorOnlyRoute=（{component:component}）=>(
（Auth.isAuthenticated（）==false？（）：（））
}
/>
);

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

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

---

多亏了

路由

组件，您的

登录

组件将获得

历史记录

道具，您可以使用该道具启动重定向

登录成功后，只需调用

history.push（'/dashboard'）

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

---

在

登录组件中

，您应该检查

Auth.isAuthenticated（）

：如果

true

，则重定向到

/dashboard

谢谢@RyanNghiem。是否可以签入路由器？谢谢@Mezba提供的解决方案。您的解决方案正在运行。