Javascript 路由在React JS中未按预期工作

我正在尝试构建一个具有用户登录/注销功能的完整堆栈应用程序

我想保护某些页面，以便只有在用户登录时才能查看它们。对于登录，我创建了一个RESTAPI，并使用会话存储来跟踪用户是否登录

validateUser = () => {

        let user = { 

            username: this.state.email, 
            password: this.state.password,
            //status: "LOGGED_IN"
        };
        
        UserService.authenticateUser(user).then((res) => {
            if(res.data === 'SUCCESS') {
                window.sessionStorage.setItem("isUserLogged", true);

      
            } else if(res.data === 'FAILURE') {
                window.sessionStorage.setItem("isUserLogged", false);
                this.resetLoginForm();
                this.setState({"error":"Invalid username or password"});
            }
        })
    };

这是我的App.js

function App() {


  return (

    <div>
      <Router>
          <HeaderComponent/>
          <div className="container">
            <Switch> 
              <Route path="/" exact component={LandingPageComponent}></Route>
              {/* <Route path ="/customers" component = {ListCustomerComponent}></Route> */}
              {/* <Route path ="/add-customer/:id" component = {CreateCustomerComponent}></Route> */}
              <Route path = "/view-customer/:id" component = {ViewCustomerComponent}></Route>
              <Route path = "/admin-login" component = {AdminLoginComponent}></Route>
              <Route path = "/admin-register" component = {AdminResgisterComponent}></Route>

              <Route path="/customers" exact render={() => (
                window.sessionStorage.getItem("isUserLogged") === "true"
                ? <ListCustomerComponent />
                : <Redirect to='/admin-login' />
              )} />

              <Route path="/add-customer/:id" exact render={() => (
                window.sessionStorage.getItem("isUserLogged") === "true"
                ? <CreateCustomerComponent />
                : <Redirect to='/admin-login' />
              )} />

              
            </Switch>
          </div>
          <FooterComponent/>
      </Router>
    </div>
  );
} 

export default App;

函数应用程序（）{
返回(
{/*  */}
{/*  */}
(
window.sessionStorage.getItem（“isUserLogged”）=“true”
? 
: 
)} />
(
window.sessionStorage.getItem（“isUserLogged”）=“true”
? 
: 
)} />
);
} 
导出默认应用程序；

如果不检查会话存储，一切正常。但是，当我尝试实现如上所示的条件路由时，我开始出现错误

如果我只放置简单的路由，那么我不会遇到这个错误

---

非常感谢您的帮助。

您没有将路线道具传递到组件中。因此

历史记录

不包含在

道具中

，您可以

console.log（this.props）

检查

this.props

包含的内容

要修复它，让我们将

Route

道具传递到组件中

<Route path="/add-customer/:id" exact render={(props) => (
   window.sessionStorage.getItem("isUserLogged") === "true"
   ? <CreateCustomerComponent {...props} /> // ADD PROPS HERE
   : <Redirect to='/admin-login' />
} />

(
window.sessionStorage.getItem（“isUserLogged”）=“true”
？//在此处添加道具
: 
} />

您没有在

列表CustomerComponent

上显示您所做的操作。 您可以尝试使用HOC

withRouter

封装组件，或者如果您使用的是功能组件，请使用

useHistory

hook

//关于导出类组件
使用路由器导出默认值（您的组件）

在功能组件中，可以使用

constyourcomponent=（）=>{
const history=useHistory（）；
//然后你可以说
//历史。推送（…）
返回…您在这里的视图。。。
}
导出默认组件；

{/*登录部分位于此处*/}
{/*AdminUser路由到此处*/}

在超级用户仪表板中，检查用户是否经过身份验证，如果未重定向到管理员登录页面，则所有路由都将可见

 <Switch>
    {/* Login Sections goes Here */}
    <Route exact path='/' component={MainPage} />
    <Route exact path='/login' component={Login} />
    <Route exact path='/admin/' component={LoginAdmin} />
    <Route exact path='/register' component={Register} />

    {/* AdminUser ROutes goes here */}
    <SuperUserDashboard>
      <Route exact path='/admin/dashboard' component={Dashboardpage} />
      <Route exact path='/admin/users' component={UsersAdmin} />
    </SuperUserDashboard>

    <Route exact path='' component={Notfound} />
  </Switch>