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 и Footer внутри себя, и я хочу рендерить разные страницы.

My PrivateRoute - это компонент, который всегда отправляет пользователювернуться на страницу входа, если пользователь не вошел в систему.

Все отлично работает, за исключением того, что NotFoundPage всегда отображается на моей целевой странице.

Answer 1

Вы можете использовать регулярные выражения с path prop для <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>
);