Ка настроить роутинг для 404 страницы?

Question

[OstapO]

Проблема заключается в следующем:
Хочу настроить хендлинг 404 ероры. Добавил роут:

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

Если ввести несуществующий путь, все работает ок. HO если перейти по существующему роуту тогда показывает 2 компонента одновременно:
1. компоненту ерор страницы
2. соответствующую компоненту роута

КОД

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',
                            }}
                        />
                    )
            }
        />
    );
}

Версии:
"react": "^16.12.0"
"react-router-dom": "^5.1.2"

Answer 1

[hellcaster]

Обычно делают как-то так

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

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

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

Comments

[OstapO]

muryn.official
<Route render={Error} />
пробовал так, тоже самое

[hellcaster]

OstapO, фишка в Switch

[OstapO]

hellcaster, то есть так как сейчас настроен Switch не ок ?

[hellcaster]

OstapO, не ок. Последний Router в Switch это элемент по умолчанию. То есть, если React Router не нашел path, который указаний выше, он применяет последний без path. В том примере, что я скинул примерно такой код написан

switch (path) {
  case `/`:
    <Home />
    break;

  case `/about`:
    <About />
    break;

  default:
    <Error />
}

[OstapO]

hellcaster, аа понял ошибку, спасибо)