React 中的 404 页面在每个页面中呈现答案

【问题标题】：404 page in React renders in every pageReact 中的 404 页面在每个页面中呈现
【发布时间】：2019-07-04 16:09:14
【问题描述】：

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

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>

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

<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 路由。

【讨论】：

【解决方案2】：

顶级 Switch 语句不起作用，因为第一个不是 Route 的元素会自动呈现，在您的情况下是 React.Fragment。即使您将 Switch 元素移动到 React.Fragment 之间，它也不会像其他默认组件那样工作。

为了处理嵌套路由，您需要一个提供者/消费者模式。参考this answer正确处理404路由

【讨论】：

@ShubhamChopra 请让我知道上述答案是否对您有帮助
不完全是，但很有用。谢谢

【解决方案3】：

<Route component={NotFound} />，或许能解决你的问题

如果你定义了任何没有“path”属性的路由，切换组件将自动移动到NotFound组件。

<Route exact strict component ={NotFound} />，可以更有用。对于确切的路线。

【讨论】：