Route(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null答案

【问题标题】：Route(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return nullRoute(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
【发布时间】：2019-08-14 07:17:17
【问题描述】：

我正在尝试创建一个受保护的路由，但是当我点击登录按钮时，它总是给我这个错误

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;

【问题讨论】：

标签： reactjs

【解决方案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 }
              }}
            />
          );
        }
      }}
    />
  );
};

【讨论】：