如何使 404 路由在 React-Router 中工作？答案

【问题标题】：How can I make the 404 route work in React-Router?如何使 404 路由在 React-Router 中工作？
【发布时间】：2019-01-07 18:16:55
【问题描述】：

我正在尝试使用 react-router 创建 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查看网站

【问题讨论】：

试试<Route component={PageNotFound} />
@YahyaAhmed 我做到了。不工作

标签： node.js reactjs react-router

【解决方案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>
    );
  }
}

如果在整个 Switch 块中没有任何路由匹配，这将允许 404 页面成为一个包罗万象的页面。

【讨论】：