时间戳

首页 > 解决方案 > 路由在 React JS 中无法正常工作

javascript - 路由在 React JS 中无法正常工作

问题描述

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

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

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;

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

错误

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

任何帮助将不胜感激。

标签： javascriptreactjsreact-router

解决方案

您没有将 Route 道具传递到您的组件中。所以history不包含在props，你可以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' />
} />

推荐阅读