Can't show Error 404 Component in nested Component in React Router

Question

I'm trying show Error component if matches not found, but nothing happens - when I choose non-existing route, I see only blank page.

The Main component adds sidebar menu in example and renders all it childes inside in rest.

When all Route componets placed directly inside Switch - all works (including Error).

But in example below, Error component does not render - if route does not match - only blank page.

If Error component placed inside Main, in that case it will be rendered even for existing routes.

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;

So, how to properly render Error component if no matches found?

Answer 1

Solution for this problem - place another Switch around Route components:

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;

Answer 2

Add exact word to the route. And better approach will be to set the Error component name to NotFound or FourZeroFour . It will work then.

<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

Try using a wildcard.

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