@OstapO

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

Проблема заключается в следующем:
Хочу настроить хендлинг 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"
  • Вопрос задан
  • 1652 просмотра
Решения вопроса 1
web_Developer_Victor
@web_Developer_Victor
Что такое google?
Обычно делают как-то так
<Switch>
  <Route path="/"
          component={Main}
          exact />

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

    <Route render={Error} />
</Switch>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы