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组件中的所有路由都像

<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

客户详细信息

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

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

1 个答案: