reactjs - React 中的 404 页面在每个页面中呈现

Question

我有一个包含多个这样的路由的路由文件

const RouteUI = ({context}) =>
  <Switch>
  <React.Fragment>

    <SDPRouteUI context={context} />

    <SDPMRouteUI context={context} />

    <ACRouteUI context={context} />

    <DCRouteUI context={context} />

    <Route path=""
      render={() =>
        <NotFound context={context} />
      }
    />

  </React.Fragment>

  </Switch>

NotFound 组件正在每个页面上呈现，即使它在 switch 内部。

SDPRouteUI,SDPMRouteUI..etc 是其他路由文件，如

const SDPRouteUI = ({context}) =>
  <Switch>
    <Route exact path='/sdp/account'
      render={() =>
        <SDPAccountPageSF context={context} />
      }
    />

    <Route exact path='/sdp/activate/back'
      render={() =>
        <SDPActivateBackSF context={context} />
      }
    />
<Switch>

Answer 1

在 react 路由器中实现 404 相当简单。在 react 路由器组件中，创建一个没有定义路径的路由。并确保将代码放在所有路由的底部，以便路由器将检查所有路由，如果没有找到匹配项，则回退。

<Router>
   <Link to="/users">Users</Link>
   <Link to="/search?q=react">Search</Link>
   <Route exact path="/about" component={AboutPage} />
   <Route exact path="/search" component={SearchPage} />
   <Route component={NoMatchPage} />
</Router>

访问任何随机 URL，您将看到一个简单的 404 页面。但是等等，让我们检查其他页面是否正常工作而不中断。不会!
检查 about 链接，您将看到 about 和 404 页面都被渲染。因为第一个路由器匹配/about 路径的确切路由，然后它遍历到底部并加载 404 路由，因为该路由没有定义路径。
React 路由器提供了一个名为 Switch 的组件，一旦路由得到解析，它就会中断，并且不会加载它下面的任何其他路由组件。
它相当容易实现。将所有路由封装在 Switch 组件中。让我们这样做，让 404 页面正常工作。

import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Switch>
          <Route exact path="/" component={IndexPage} />
          ...
          <Route exact path="/search" component={SearchPage} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
    </section>
  );
};

...

这个 Switch 组件将检查匹配的路由，如果一个路由已经匹配，它会中断检查下一个路由。通过这种方式，我们将避免为所有页面渲染 404 路由。