响应JS交换机路由器仅管理页面不打我的404页面

Question

我想限制我的应用程序的部分仅登录用户。我有这个工作使用下面的代码。

然而，以前我使用交换机路由器将用户发送到404页面时，没有找到匹配的路由。

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

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

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

我希望交换机路由器忽略嵌套在EnsureLoggedIn中的内容，因为所有路由都不匹配，然后渲染404。

希望有更多经验的人能指导我。

一个pp.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" /> );
     }
   }
 }

Answer 1

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

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

然后在render函数中，如果用户未登录，则以下命令确保以/user区域开头的任何url都将重定向到登录页面。

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

一个pp.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>

Answer 2

考虑使用<代码>

编辑：

大致的东西：

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