страница не найдена не отображается, если маршрут не соответствует

Question

По мне, у меня немного сложная маршрутизация, потому что мне приходится обрабатывать разные домены для разных модулей.Вот почему я настроил маршруты следующим образом.

Вот оно

ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Root />
      </ConnectedRouter>
    </Provider>,
  MOUNT_NODE,
);

class App extends React.Component {
  render() {
    return (
      <Switch>
        <UnauthenticatedRoute path="/auth" component={AsyncLogin} {...this.props} />
        <AuthenticatedRoute path="/" component={AsyncHome} {...this.props} />
      </Switch>
    );
  }
}

class Home extends React.Component<propsCheck> {
  componentDidMount() {
    this.props.getUser();
  }

  renderRoutes(userRole, roles, userData, props) {
    const domain = window.location.hostname; // domain will be like app.abc.com, app.def.com.
    switch (domain) {
      case GROWTH_URL:
        return growthRoutes(userRole, roles, userData, props);
      case CONTENT_URL:
        return contentRoutes(userRole, roles, userData, props);
      default:
        return growthRoutes(userRole, roles, userData, props);
    }
  }

  render() {
    if (this.props.loading) {
      return <Spinner background="none" />;
    }
    return <Switch>{this.renderRoutes(userRole, roles, userData, this.props)}</Switch>;
  }
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Home);
export default withRouter(withConnect);


function NotFoundPage() {
  return <div>Not found</div>;
}

export function growthRoutes(userRole, roles, userData, props) {
  return (
    <Switch>
      <Route
        exact
        path="/"
        render={() =>
          (!isEmpty(userRole) && userRole.client !== null && isClient(roles)) ||
          (!isEmpty(userData) && userData.client !== null && isClient(userData.roles)) ? (
            <Redirect to={`${!isEmpty(userRole) ? userRole.client[0].company_slug : userData.company[0]}`} />
          ) : (
            <Redirect to="/clients" />
          )
        }
      />
      <DashboardRoute path="/clients" component={Clients} {...props} />
      <DashboardRoute path="/:company/" component={ClientDetail} {...props} />
      <DashboardRoute path="/:company/client_detail" component={ClientDetail} {...props} />
      <DashboardRoute path="/:company/edit-client" component={Admin(Client)} {...props} />
      <DashboardRoute path="/tasks" component={Tasks} {...props} />
      <DashboardRoute to="*" component={NotFoundPage} />
    </Switch>
  );
}

Я не мог показать NotFoundPage таким образом и не мог понять, почему он не работает.Я понятия не имею, где я должен использовать фрагмент <Route path="*" component={NotFoundPage}>.Нигде это не работает.Кто-нибудь может посмотреть на это, пожалуйста?

Answer 1

Проблема в том, как вы определяете свои маршруты.так как у вас есть Маршрут /:company/, он будет соответствовать всему, что начинается с /, например /abc/, /abc/sfsf/fsgs и т. д.

Итак, вам нужно сначала изменить порядок маршрутов,что все Маршруты в компоненте Коммутатора работают как

<Switch>
     <Route
        exact
        path="/"
        render={() =>
          (!isEmpty(userRole) && userRole.client !== null && isClient(roles)) ||
          (!isEmpty(userData) && userData.client !== null && isClient(userData.roles)) ? (
            <Redirect to={`${!isEmpty(userRole) ? userRole.client[0].company_slug : userData.company[0]}`} />
          ) : (
            <Redirect to="/clients" />
          )
        }
      />
      <DashboardRoute path="/clients" component={Clients} {...props} />
      <DashboardRoute path="/tasks" component={Tasks} {...props} />
      <DashboardRoute path="/:company/client_detail" component={ClientDetail} {...props} />
      <DashboardRoute path="/:company/edit-client" component={Admin(Client)} {...props} />
      <DashboardRoute exact path="/:company" component={ClientDetail} {...props} />
      <DashboardRoute to="*" component={NotFoundPage} />
</Switch>

Теперь в вышеприведенном случае маршруты, такие как /abc/ffg/, будут отображать NotFoundPage, но Маршруты, подобные /abc, все равно будут совпадать с /:company, где компания будет abc,Итак, что вам нужно сделать в ClientDetail, проверьте, является ли компания действительной компанией, и верните правильное представление, а если нет, вы вернете NotFoundPage

ClientDetails

render() {
    if(!validCompanies.includes(this.props.match.company)) {
        return <DashboardRoute to="*" component={NotFoundPage} />
    }
    // Normal component logic here
}