Route(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Question

i am trying to make a protected route but when i click to the login button it always gave me this error

Route(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Thanks in advance

   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;

David David · Accepted Answer · 2019-03-23T14:05:54

Return the component requested if user is authenticated or redirect to Login page, Forbidden page or whatelse...

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(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

1 Answers