reactjs - React JS Switch Router with admin only pages not hitting my 404 page -

i want restrict parts of app logged in users only. have working using code below.

however, making use of switch router send users 404 page when no matching routes found.

for reason since adding ensureloggedin component app.jsx user never redirected 404 page.

test: random path entered in url. should route 404 page.

• isloggedin=false : user gets directed /login page.
• isloggedin=true : no matching route found , page container rendered empty.

i'd expect switch router ignore what's nested inside ensureloggedin since none of routes match, render 404.

hoping bit more react experience can steer me on this.

app.jsx

<browserrouter>   <header/>   <switch>    <route exact path="/" component={homepage}/>    <route exact path="/someotherpage" component={someotherpage}/>    <ensureloggedin>      <route exact path="/dashboard" component={dashboard}/>    </ensureloggedin>    <route component={error404page}/>   </switch>   <footer/> </browserrouter> 

ensureloggedin.jsx

 class ensureloggedin extends component {     constructor(props) {      super(props);      this.state = {isloggedin: false};    }     render() {      const isloggedin = this.state.isloggedin;      if (isloggedin) {        return this.props.children      } else {         return ( <redirect to="/login" /> );      }    }  } 

<switch> renders first matching child <route> - <ensureloggedin> component gets rendered anyway , circumvents <switch> exclusivity explicitly rendering children. i'm not sure kind of hierarchy supported.

consider having <loggedinensuringdashboard> or similar , putting straight router without nesting.

edit:

something along lines of:

<browserrouter>   <header/>   <switch>    <route exact path="/" component={homepage}/>    <route exact path="/someotherpage" component={someotherpage}/>    <route exact path="/dashboard" component={loggedinensuringdashboard}/>    <route component={error404page}/>   </switch>   <footer/> </browserrouter> 

and

class loggedinensuringdashboard extends component {     constructor(props) {      super(props);    }     render() {      if (this.props.isloggedin) {        return <dashboard>      } else {         return <redirect to="/login" />      }    }  }