reactjs - React Router 'NotFoundPage' 总是出现！如何解决？

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 和页脚，并且我想呈现不同的页面。

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

一切都很好，除了 NotFoundPage 总是显示在我的登陆页面上。

标签： reactjsreact-router

Answer 1

您可以将正则表达式与组件上的pathprop一起使用<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>
);