Question

我有一个如下所示的AppRouter.js文件：

  const AppRouter = () => (
    <BrowserRouter>
      <div>
        <Navbar />
        <Route exact path="/" component={Landing} />
        <div className="container">
          <Switch>
            <Route path="/register" component={Register} />
            <Route path="/login" component={Login} />
            <PrivateRoute path="/dashboard" component={Dashboard} />
            <Route component={PageNotFound} />
          </Switch>
        </div>
        <Footer />
      </div>
    </BrowserRouter>
);

我的问题是在登录页面中看到PageNotFound，但是在其他页面中却没有显示。我该如何解决？

我想始终在内显示我的NavBar和Footer，并希望呈现不同的页面。

我的PrivateRoute是一个组件，如果用户未登录，它总是将用户发送回登录页面。

除了NotFoundPage始终显示在我的着陆页上之外，一切都很好。

Answer 1

您可以在path组件上使用带有<Route />道具的正则表达式。您可以使用path="*"来捕捉其他路线，并依次执行以下操作以显示PageNotFound屏幕：

const AppRouter = () => (
    <BrowserRouter>
      <div>
        <Navbar />
        <div className="container">
          <Switch>
            <Route exact path="/" component={Landing} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/login" component={Login} />
            <PrivateRoute exact path="/dashboard" component={Dashboard} />
            <Route path="*" component={PageNotFound} /> 
          </Switch>
        </div>
        <Footer />
      </div>
    </BrowserRouter>
);

React Router'NotFoundPage'总是显示！如何解决？

1 个答案: