无法在 React Router 的嵌套组件中显示错误 404 组件

Question

如果未找到匹配项，我正在尝试显示错误组件，但没有任何反应 - 当我选择不存在的路线时，我只看到空白页。

Main 组件在示例中添加侧边栏菜单，并在 rest 中呈现它的所有子项。

当所有 Route 组件直接放置在 Switch 内时 - 一切正常（包括错误）。

但在下面的示例中，错误组件不会呈现 - 如果路由不匹配 - 只有空白页面。

如果 Error 组件放置在 Main 中，在这种情况下，即使对于现有路由，它也会被渲染。

import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import Error from "../../containers/Error";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";


function App()
{
  return (
    <div className="App">

      <Header isLogged={false}/>

      <Switch>

        <Route exact path='/' component={Signin} />
        <Route path='/signup' component={Signup} />


        <Main>
            <Route path='/courses' component={Courses} />
            <Route path='/course/:id' component={Course} exact/>
            <Route path='/quiz' component={Quiz} />
            <Route path='/library' component={Library} />
            <Route path='/quiz-results' component={QuizResults} />
            <Route path='/students' component={StudentsList} />

            <Route component={Error} />
        </Main>

      </Switch>

    </div>
  );
}

export default App;

那么，如果找不到匹配项，如何正确渲染 Error 组件？

Answer 1

尝试使用通配符。

<Route path="/*" component={Error} />

Answer 2

在路线中添加确切的单词。更好的方法是将 Error 组件名称设置为 NotFound 或 FourZeroFour 。然后就可以了。

<Router>
<Switch>

    <Route exact path='/' component={Signin} />
    <Route exact path='/signup' component={Signup} />


    <Main>
        <Route exact path='/courses' component={Courses} />
        <Route exact path='/course/:id' component={Course} />
        <Route exact path='/quiz' component={Quiz} />
        <Route exact path='/library' component={Library} />
        <Route exact path='/quiz-results' component={QuizResults} />
        <Route exact path='/students' component={StudentsList} />

        <Route component={NotFound} />
    </Main>

  </Switch>
  </Router>

Answer 3

此问题的解决方案 - 在 Route 组件周围放置另一个 Switch：

import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import NotFound from "../../containers/NotFound";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";


function App()
{
  return (
    <div className="App">

      <Header isLogged={false}/>

      <Switch>

          <Route exact path='/' component={Signin} />
          <Route exact path='/signup' component={Signup} />

          <Main>

              <Switch>
                  <Route exact path='/courses' component={Courses} />
                  <Route exact path='/course/:id' component={Course} />
                  <Route exact path='/quiz' component={Quiz} />
                  <Route exact path='/library' component={Library} />
                  <Route exact path='/quiz-results' component={QuizResults} />
                  <Route exact path='/students' component={StudentsList} />

                  <Route path='*' component={NotFound} />
              </Switch>

          </Main>

      </Switch>

    </div>
  );
}

export default App;