Question

我正在尝试建立一条受保护的路线，但是当我单击登录按钮时，它总是会给我这个错误

Route（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

预先感谢

   import VideoStream from "./Components/VideoStream"
   import ScreenShare from "./Components/ScreenShare"
   const Auth = {
   isAuthenticated: false,
   authenticate(cb) {
    this.isAuthentecated = true
    cb()
  },
    signOut(cb) {
    this.isAuthenticated = false
    cb()
  }
}

    const PrivatRoute = ({ component: Component, ...rest }) => {
    return (
    <Route
      {...rest} render={props => {
        if (Auth.authinticate === true) {
          return (<Component {...props} />
          )
        }
        else {
          alert("ashraf")

        }
      }
      } />
   )
  }
   class App extends Component {
   render() {
    return (
      <div className="App">

        <BrowserRouter>


          <Switch>

            <Route exact path="/ScreenShare" component={ScreenShare} />
            <Route exact path="/" component={Home} />
            <PrivatRoute exact path="/VideoStream" component={VideoStream} />

          </Switch>

        </BrowserRouter>
      </div>
    );
    }
   }

   export default App;

Answer 1

如果用户通过了身份验证，则返回请求的组件，或者将其重定向到“登录”页面，“禁止”页面或其他...

const PrivatRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (Auth.authinticate === true) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/login",
                state: { from: props.location }
              }}
            />
          );
        }
      }}
    />
  );
};

Route（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，请返回null

1 个答案: