How to configure routing for 404 pages?

Question

JavaScript

The problem consists in the following:
I want to configure a handling 404 . Added route:

<Route path="*" render={() => <ErrorPage content={content404}/>} />

If you enter a non-existent path, everything works ok. HO if you follow an existing route then it shows 2 components at the same time:
1. the page's eror component
2. the corresponding route component

THE CODE

import { HashRouter as Router, Switch, Route, Redirect } from "react-router-dom";
render () {
    const { toggle, loading } = this.state;
    
    return (
      <Router>
          
          <Route render={() => (
            <>
              {
                this.checkRouteType() ? (
                    <Switch>
                      <Route exact path="/signup" component={Signup}/>
                      <Route exact path="/signin" component={Signin}/>
                      <Route exact path="/error" render={() => (
                        <ErrorPage content={content403}/>
                      )}
                      />
                    </Switch>
                ) : (
                  <Switch>
                    <>
                      <div className={toggle ? "App" : 'App toggled' } id={"wrapper"}>
                        <MobileTopNav />

                        <Sidebar onToggle={() => this.setState({ toggle: !toggle })} />

                        <Navbar />

                        <div id="content-wrapper">
                          <Route exact path="/" render={() => (
                            <Redirect to="/space-visualizer" />
                          )}/>
                          <Route exact path="/pdf-view" component={PdfView}/>
                          <ProtectedRoute isSignedIn={this.authCheck.isAuth()} exact path="/budget-tool" component={BudgetTool}/>
                          <ProtectedRoute isSignedIn={this.authCheck.isAuth()} exact path="/space-metrics" component={SpaceMetrics}/>
                          <ProtectedRoute isSignedIn={this.authCheck.isAuth()} exact path="/pdf-report" component={PdfReport}/>
                          <ProtectedRoute isSignedIn={this.authCheck.isAuth()} exact path="/project-examples" component={ProjectExamples}/>
                          <ProtectedRoute isSignedIn={this.authCheck.isAuth()} exact path="/space-visualizer" component={SpaceVisualizer}/>
                          <Route path="*" render={() => <ErrorPage content={content404}/>} />
                          <Notification />
                        </div>
                        <MobileBottomNav /> 
                      {Loading(loading)}
                      </div>
                    </>
                  </Switch>
                )
              }
            </>
          )} />
      </Router>
    )
  }

ProtectedRouter

const ProtectedRoute = (props: PrivateRouteProps) => {
    const { component: Component, isSignedIn, ...rest } = props;

    return (
        <Route
            {...rest}
            render={(routeProps) =>
                isSignedIn ? (
                    <Component {...routeProps} />
                ) : (
                        <Redirect
                            to={{
                                pathname: '/error',
                            }}
                        />
                    )
            }
        />
    );
}

Versions:
"react": "^16.12.0"
"react-router-dom": "^5.1.2"

Answer 1

They usually do something like this

<Switch>
  <Route path="/"
          component={Main}
          exact />

  <Route path="/about" 
          component={About}
          exact />

    <Route render={Error} />
</Switch>