为什么 React Router 开关总是显示第一个组件？ 你可以只包装 1 个悬念，它也会起作用

问题描述

我可以试试这行代码；

// This code redirect to as "/" and it's work but example when ı write "/blabla" doesn't show Errorpage
<Switch>
       <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
            <Route exact path="/" component={Home} />
       </Suspense>
       <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
             <Route component={ErrorPage} />
       </Suspense>
 </Switch>

但它不会在页面上显示错误组件。 我发现了一件事，哪一个在开关的顶部。它正在显示。 示例：

// Showing Home Component
<Switch>
      <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
        <Route exact path="/home" component={Home} />
      </Suspense>
      <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
        <Route component={ErrorPage} />
      </Suspense>
 </Switch>

// Showing ErrorPage component
        <Switch>
          <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
            <Route component={ErrorPage} />
          </Suspense>
          <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
            <Route exact path="/" component={Home} />
          </Suspense>
        </Switch>

解决方法

你可以只包装 1 个悬念，它也会起作用

试试下面的代码，看看它是否有效

/ 将呈现 Home 和任何其他路由错误页面

<Switch>
       <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
         //anything wrong in this wrapped suspense will execute fallback
            <Route exact path="/" component={Home} />
            <Route path='/' component={ErrorPage} />
       </Suspense>
 </Switch>

,

Route 必须是 Switch 的直接子代。所以改为这样做。

<Switch>
  <Route exact path="/">
    <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
      <Home />
    </Suspense>
  </Route>
  <Route path="*">
    <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
      <ErrorPage />
    </Suspense>
  </Route>
</Switch>

,

switch 的作用是当它匹配一条路由时，它根本不会寻找任何其他组件。它将始终呈现第一个匹配项，并且不会进一步查看。基本上，它在调试代码时很有用。 我猜在你的代码中，你必须定义一个额外的路径名来显示错误页面。 希望我的回答对您有所帮助。