仅管理页面的 React JS Switch Router 未访问我的 404 页面答案

【问题标题】：React JS Switch Router with admin only pages not hitting my 404 page仅管理页面的 React JS Switch Router 未访问我的 404 页面
【发布时间】：2018-02-20 10:41:54
【问题描述】：

我想将我的应用程序的某些部分限制为仅限登录用户。我使用下面的代码进行这项工作。

但是，以前我使用 Switch 路由器在找不到匹配的路由时将用户发送到 404 页面。

由于某种原因，自从我将 EnsureLoggedIn 组件添加到 App.jsx 后，用户永远不会被重定向到 404 页面。

测试：在 URL 中输入的随机路径。应该路由到 404 页面。

isLoggedIn=false ：用户被定向到 /login 页面。
isLoggedIn=true ：找不到匹配的路由，页面容器呈现为空。

我希望交换机路由器忽略嵌套在 EnsureLoggedIn 中的内容，因为没有任何路由匹配，然后呈现 404。

希望有更多 React 经验的人可以指导我。

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" /> );
     }
   }
 }

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

<Switch> 渲染第一个匹配的子 <Route> - 但是您的 <EnsureLoggedIn> 组件无论如何都会被渲染，并通过显式渲染其子组件来规避 <Switch> 的排他性。我不确定是否支持这种层次结构。

考虑使用<LoggedInEnsuringDashboard> 或类似名称，然后将其直接放入Router 中而不进行嵌套。

编辑：

类似的东西：

<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>

还有

class LoggedInEnsuringDashboard extends Component {

   constructor(props) {
     super(props);
   }

   render() {
     if (this.props.isLoggedIn) {
       return <Dashboard>
     } else {
        return <Redirect to="/login" />
     }
   }
 }

【讨论】：

谢谢。我还发现 react-router v4 不喜欢嵌套路由。我的方法基于过时的教程。

【解决方案2】：

只是为了提供我最终使用的另一种方法。

这涉及创建一个名为 UserArea 的容器，该容器将所有仅管理员页面列为子容器。

然后在render函数中，以下确保如果用户未登录，任何以/user-area开头的url都会被重定向到登录页面。

this.isLoggedIn() ? (<UserArea />) : (<Redirect to="/login" />) )

App.jsx

<BrowserRouter>
  <Header/>
  <Switch>
   <Route exact path="/" component={HomePage}/>
   <Route exact path="/someotherpage" component={SomeOtherPage}/>
   <Route exact path="/login" component={LoginPage}/>
   <Route path="/user-area" render={ ()=>(this.isLoggedIn() ? (<UserArea />) : (<Redirect to="/login" />) )} />
   <Route component={Error404Page}/>
  </Switch>
  <Footer/>
</BrowserRouter>

UserArea.jsx

<BrowserRouter>
  <main className="ks-main-content ks-container__user-area">
    <UserAreaHeader />
      <Switch>
      <Route exact path="/user-area/dashboard" component={UserAreaDashboardPage}/>
      <Route exact path="/user-area/profile" component={UserAreaProfile}/>
      <Route component={Error404Page} />
    </Switch>
  </main>
</BrowserRouter>

【讨论】：