路由不匹配时，未显示未找到页面

Question

As per me, I have a bit complex routing because I have to handle different domain for different modules. That is why i configured the routes in a following way.

Here it is

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>
  );
}

I could not show NotFoundPage this way and could not figure out why it is not working. I have no idea where should i use the snippet <Route path="*" component={NotFoundPage}> . Nowhere it works. Can anyone look at this, please?

Answer 1

The problem is with respect to how you define your routes. since you have a Route /:company/ , it will match anything which starts with / like /abc/ , /abc/sfsf/fsgs and so on

So what you need to do is to first reorder your Routes, so that all Routes within Switch component work like

<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>

Now in the above case routes like /abc/ffg/ will show NotFoundPage but still Routes like /abc will still match /:company where company will be abc . So what you need to do in ClientDetail, check if the company is a valid company and return the Correct view and if it isn't you return the NotFoundPage

ClientDetails

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