Question

我正在开发二手车销售网站。我想要一个管理面板，管理员可以在其中输入汽车和照片。我还希望拥有一个外观不同的网站，以供客户搜索汽车。

我想确保两个站点的样式都不会冲突，因为我希望两个站点都在同一个React项目中。到目前为止，我的解决方案是使用嵌套路由，如下所示。如果路由是/ admin，则将加载管理应用程序；否则，如果它是/，则将加载普通站点。

import MainSite from "app/modules/mainsite/main";
import AdminSite from "app/modules/admin/main";

const baseHref = document
  .querySelector("base")
  .getAttribute("href")
  .replace(/\/$/, "");

export interface IAppProps extends StateProps, DispatchProps {}

export class App extends React.Component<IAppProps> {
  componentDidMount() {
    this.props.getSession();
    this.props.getProfile();
  }

  render() {
    const paddingTop = "60px";
    return (
      <Router basename={baseHref}>
        <ErrorBoundary>
          <div className="view-routes">
            <Switch>
              <ErrorBoundaryRoute exact path="/" component={MainSite} />
              <ErrorBoundaryRoute exact path="/admin" component={AdminSite} />
            </Switch>
          </div>
        </ErrorBoundary>
      </Router>
    );
  }
}

AdminSite随后将包含其每个组件的嵌套路由。 MainSite也是如此。我愿意提出建议。有没有更好的方法可以做到这一点？

Answer 1

这是一个很好的方法。虽然请确保对管理页面进行身份验证。

React：如何分隔管理仪表盘和主站点？

1 个答案: