reactjs – 一旦url在react js中更改,登录页面就会显示在仪表板内部

我在我的应用程序中使用核心ui模板,它有一个默认的应用程序页面,仪表板页面和登录页面。我已经设置了检查用户是否登录的功能。如果我没有显示登录页面。一旦用户成功登录我正在显示仪表板页面。但是当我手动更改URL时,我可以在仪表板页面内看到登录页面。任何人都可以告诉我如何解决这个问题。

默认布局:

class DefaultLayout extends Component {
 constructor(props) {
  super(props);
  this.state = {};
}
render() {
const user = this.props;
console.log('user in DefaultLayout', user);
return (
  <div className="app">
    {user.authUser!=null && (<AppHeader fixed>
      <DefaultHeader />
    </AppHeader>)}
    <div className="app-body">
      {user.authUser!=null && (
        <AppSidebar fixed display="lg">
          <AppSidebarHeader />
          <AppSidebarForm />
          <AppSidebarNav navConfig={navigation} {...this.props} />
          <AppSidebarFooter />
          <AppSidebarMinimizer />
        </AppSidebar>
      )}
      <main className="main">
        <ToastContainer />
        {user.authUser!=null && (
          <AppBreadcrumb appRoutes={routes} />
        )}
        <Container fluid>
          <Switch>
            {routes.map((route, idx) => {
              return route.component ? (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={(props) => <route.component {...props} />}
                />
              ) : null;
            })}
            <Redirect from="/" to="/dashboard" />
          </Switch>
        </Container>
      </main>
      {user.authUser!=null && (
        <AppAside fixed hidden>
          <DefaultAside />
        </AppAside>
      )}
    </div>
    {user.authUser!=null && (
      <AppFooter>
        <DefaultFooter />
      </AppFooter>
    )}
  </div>
);

我在我的应用程序中使用核心ui模板,它有一个默认的应用程序页面,仪表板页面和登录页面。我已经设置了检查用户是否登录的功能。如果我没有显示登录页面。一旦用户成功登录我正在显示仪表板页面。但是当我手动更改URL时,我可以在仪表板页面内看到登录页面。任何人都可以告诉我如何解决这个问题。

默认布局:

class DefaultLayout extends Component {
 constructor(props) {
  super(props);
  this.state = {};
}
render() {
const user = this.props;
console.log('user in DefaultLayout', user);
return (
  <div className="app">
    {user.authUser!=null && (<AppHeader fixed>
      <DefaultHeader />
    </AppHeader>)}
    <div className="app-body">
      {user.authUser!=null && (
        <AppSidebar fixed display="lg">
          <AppSidebarHeader />
          <AppSidebarForm />
          <AppSidebarNav navConfig={navigation} {...this.props} />
          <AppSidebarFooter />
          <AppSidebarMinimizer />
        </AppSidebar>
      )}
      <main className="main">
        <ToastContainer />
        {user.authUser!=null && (
          <AppBreadcrumb appRoutes={routes} />
        )}
        <Container fluid>
          <Switch>
            {routes.map((route, idx) => {
              return route.component ? (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={(props) => <route.component {...props} />}
                />
              ) : null;
            })}
            <Redirect from="/" to="/dashboard" />
          </Switch>
        </Container>
      </main>
      {user.authUser!=null && (
        <AppAside fixed hidden>
          <DefaultAside />
        </AppAside>
      )}
    </div>
    {user.authUser!=null && (
      <AppFooter>
        <DefaultFooter />
      </AppFooter>
    )}
  </div>
);

}}

路线:

const routes = [
 { path: '/', exact: true, name: 'Home', component: DefaultLayout },
 { path: '/signin', exact: true, name: 'SignIn', component: SignIn },
 { path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard },
 { path: '/employee', exact: true, name: 'Employee', component: Employee },
 { path: '/agent', exact: true, name: 'Agent', component: Agent }
]; 输出:

添加评论

友情链接:蝴蝶教程