React.js路由404页面(ErrorPage)在所有页面显示如何修复？

问题原因 #

你当前的写法违反了React Router v5中<Switch>组件的匹配规则：<Switch>只会对它的直接子元素进行路由匹配，且仅渲染第一个匹配到的子元素。
你在<Switch>下直接放了<Fragment>作为子元素，这个Fragment没有绑定任何path属性，所以不管访问什么路径，<Switch>都会直接匹配到这个Fragment并渲染它的全部内容，自然Fragment内部的404路由也会在所有页面都触发。同时你给404路由加了exact属性，也会导致匹配逻辑异常。

修复方案 #

你需要把带Header、Footer的公共布局也封装成路由组件，把所有路由都变成<Switch>的直接子元素，具体修改如下：

1. 先把带公共布局的路由逻辑单独抽出来，作为一个Layout组件：

const CommonLayout = () => {
  return (
    <Fragment>
      <Header />
      <Alerts />
      <div className="container body pb-5">
        <Switch>
          {/* General public routes */}
          <Route exact path="/blog" />
          <Route exact path="/" component={FrontPage} />
          {/* (Agency) Clients */}
          <PrivateRoute exact path="/clients" component={Clients} />
          <PrivateRoute
            exact
            path="/clients/edit"
            component={ClientsPanel}
          />
          <PrivateRoute exact path="/drafts" component={Drafts} />
          <PrivateRoute exact path="/offers" component={Offers} />
          {/* Account management  */}
          <PrivateRoute exact path="/settings" component={Settings} />
          <PrivateRoute exact path="/teams" component={Teams} />
          <PrivateRoute exact path="/discounts" component={Discounts} />
          {/* 404路由不需要加exact，只在公共布局路由都不匹配时渲染 */}
          <PrivateRoute path="*" component={ErrorPage} />
        </Switch>
      </div>
      <Footer />
    </Fragment>
  )
}

2. 再修改外层的Switch配置，把所有子元素都改成Route/PrivateRoute类型：

return (
  <Provider store={store}>
    <AlertProvider template={AlertTemplate} {...alertOptions}>
      <Router>
        <Switch>
          {/* routes without a header & footer */}
          <PrivateRoute
            exact
            path="/register/confirm"
            component={AccountConfirm}
          />
          <PrivateRoute
            exact
            path="/drafts/draft-panel"
            component={() => fullWidthPanel}
          />
          <PrivateRoute
            exact
            path="/drafts/draft-panel/locations"
            component={Locations}
          />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          {/* Offer confirm page */}
          <Route exact path="/d/:slug" component={SharedOffer} />
          {/* 所有需要公共布局的路由都走下面这个无path的Route，会在前面的路由都不匹配时渲染 */}
          <Route component={CommonLayout} />
        </Switch>
      </Router>
    </AlertProvider>
  </Provider>
);

内容的提问来源于stack exchange，提问作者Mason Lillipuu