Как я могу заставить работать маршрут 404 в React-Router?

Question

Я пытаюсь создать маршрут 404 с реакции-маршрутизатором, и он не работает.

Я попробовал <Route path="*" component={PageNotFound} /> и <Route component={PageNotFound} /> и обернул все мои маршруты <Switch></Switch. Я предполагаю, что это не работает, потому что у меня есть два <Switch /> компонента, вложенных друг в друга.

App.js:

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Header />
            <Switch>
              <Route exact path="/" component={Landing} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/profiles" component={Profiles} />
              <Route exact path="/profile/:id" component={Profile} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Dashboard} />
              </Switch>
              <Switch>
                <PrivateRoute exact path="/posts" component={Posts} />
              </Switch>
              <Switch>
                <PrivateRoute exact path="/post/:id" component={Post} />
              </Switch>
              <Switch>
                <PrivateRoute
                  exact
                  path="/create-profile"
                  component={CreateProfile}
                />
              </Switch>
              <Switch>
                <PrivateRoute
                  exact
                  path="/edit-profile"
                  component={EditProfile}
                />
              </Switch>
              <Route path="*" component={PageNotFound} />
            </Switch>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

PrivateRoute.js:

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      auth.isAuthenticated === true ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

Я также попытался поставить маршрут 404 чуть выше первого <PrivateRoute />. И это работает для не частных маршрутов, но я хочу, чтобы это работало на всех маршрутах. Пример выше также портит маршрут <PrivateRoute exact path="/posts" component={Posts} />.

Вы можете просмотреть веб-сайт по адресу https://floating -waters-33077.herokuapp.com

Answer 1

Я думаю, что проблема в количестве Switch блоков, которые у вас есть. В идеале вы должны иметь один. Поскольку каждый маршрут exact, вы можете сконденсировать ваши Switch дочерние компоненты до

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Header />
            <Switch>
              <Route exact path="/" component={Landing} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/profiles" component={Profiles} />
              <Route exact path="/profile/:id" component={Profile} />
              <PrivateRoute exact path="/dashboard" component={Dashboard} />
              <PrivateRoute exact path="/posts" component={Posts} />
              <PrivateRoute exact path="/post/:id" component={Post} />
              <PrivateRoute
                exact
                path="/create-profile"
                component={CreateProfile}
              />
              <PrivateRoute
                exact
                path="/edit-profile"
                component={EditProfile}
              />
              <Route component={PageNotFound} />
            </Switch>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

Это позволит странице 404 быть универсальной, если ни один из маршрутов не совпадает в общем блоке Switch.