我正在开发一个二手车销售网站。我想有一个管理面板,在那里管理员进入汽车和照片。我也想有一个独立的网站与一个不同的外观为客户搜索汽车的感觉。
我想确保两个网站的样式不会冲突,因为我希望两个网站都在同一个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
也是如此。我乐于接受大家的建议。有没有更好的方法可以做到这一点?
发布于 2019-07-19 03:06:21
这是一种很好的方法。不过,请确保为管理页面处理身份验证。
https://stackoverflow.com/questions/57104544
复制相似问题