Reactjs 将路线与布局的其余部分分开-反应

我有一个应用程序，我想添加一个管理页面。我希望管理页面有自己的布局从客户端布局分开。以我现有的情况来看，实现这一目标的当前“最佳”方式是什么

app.js

import './App.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from './pages/HomePage';
import ItemDetailPage from './pages/ItemDetailPage';
import Header from './components/Header';
import Footer from './components/Footer';
import CollectionPage from './pages/CollectionPage';
import AdminPage from './pages/AdminPage';

function App() {
  return (
    <Router>
      {/* Admin app routes */}
        {/* <Route exact path="/admin" component={AdminPage}/> */}
      {/* Client app routes */}
      <div className="app">
        <Header />
        <Switch>
          <Route exact path="/" component={HomePage}/>
          <Route exact path="/item/:itemID" component={ItemDetailPage}/>
          <Route exact path="/collections/:collection" component={CollectionPage}/>
        </Switch>
        <Footer />
    </div>
    </Router>
    
  );
}

export default App;

import'/App.css'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./pages/HomePage”导入主页；
从“./pages/ItemDetailPage”导入ItemDetailPage；
从“./components/Header”导入标题；
从“./components/Footer”导入页脚；
从“./pages/CollectionPage”导入CollectionPage；
从“./pages/AdminPage”导入AdminPage；
函数App（）{
返回(
{/*管理员应用程序路由*/}
{/*  */}
{/*客户端应用程序路由*/}
);
}
导出默认应用程序；

临时的

导出默认函数ClientLayoutHOC（props）{
const{component:component，…rest}=props；
返回(
{/* */}
{props.children}
)
}

---

---

我找到了。我是否应该创建一个

AdminLayout

和

ClientLayout

组件并对页面进行过滤？

您可以创建一个高阶组件并将其添加到非管理员页面，如下所示： HOC可以包含div包装以及页眉和页脚

然后你的所有路线都在路由器中保持干净。交换

下面的HOC、HomePage、ItemDetailPage和CollectionPage的匿名函数是您将对这些组件进行更改的示例。HOC组件也将是一个单独的组件

const HOC = (props) => {
    const {component: Component, ...rest} = props;
    return (
        <div className="app">
            <Header/>
            <Component {...rest}/>
            <Footer/>
        </div>
    )
}

const HomePage = (props) => {
    return (
        <HOC>
            {/* replace with HomePage content*/}
        </HOC>
    )
}

const ItemDetailPage = (props) => {
    return (
        <HOC>
            {/* replace with ItemDetailPage content*/}
        </HOC>
    )
}

const CollectionPage = (props) => {
    return (
        <HOC>
            {/* replace with CollectionPage content*/}
        </HOC>
    )
}

function App() {
    return (
        <Router>
            <Switch>
                {/* Admin app routes */}
                <Route exact path="/admin" component={AdminPage}/>
                {/* Client app routes */}
                <Route exact path="/" component={HomePage} />
                <Route exact path="/item/:itemID" component={ItemDetailPage}/>
                <Route exact path="/collections/:collection" component={CollectionPage}/>
            </Switch>
        </Router>

    );
}

const HOC=（道具）=>{
const{component:component，…rest}=props；
返回(
)
}
const主页=（道具）=>{
返回(
{/*替换为主页内容*/}
)
}
const ItemDetailPage=（道具）=>{
返回(
{/*替换为ItemDetailPage内容*/}
)
}
const CollectionPage=（道具）=>{
返回(
{/*替换为CollectionPage内容*/}
)
}
函数App（）{
返回(
{/*管理员应用程序路由*/}
{/*客户端应用程序路由*/}
);
}

在查看添加的HOC代码时，我建议进行以下更改：

export default function ClientLayoutHOC(props) {
    const {component: Component, children, ...rest} = props;
    return (
        <div className="app">
            <Header />
                <Component {...rest}>
                    {children}
                </Component>
            <Footer />
        </div>
    )
}

导出默认函数ClientLayoutHOC（props）{
const{component:component，children，…rest}=props；
返回(
{儿童}
)
}

您可以创建一个高阶组件并将其添加到非管理员页面，如下所示： HOC可以包含div包装以及页眉和页脚

然后你的所有路线都在路由器中保持干净。交换

下面的HOC、HomePage、ItemDetailPage和CollectionPage的匿名函数是您将对这些组件进行更改的示例。HOC组件也将是一个单独的组件

const HOC = (props) => {
    const {component: Component, ...rest} = props;
    return (
        <div className="app">
            <Header/>
            <Component {...rest}/>
            <Footer/>
        </div>
    )
}

const HomePage = (props) => {
    return (
        <HOC>
            {/* replace with HomePage content*/}
        </HOC>
    )
}

const ItemDetailPage = (props) => {
    return (
        <HOC>
            {/* replace with ItemDetailPage content*/}
        </HOC>
    )
}

const CollectionPage = (props) => {
    return (
        <HOC>
            {/* replace with CollectionPage content*/}
        </HOC>
    )
}

function App() {
    return (
        <Router>
            <Switch>
                {/* Admin app routes */}
                <Route exact path="/admin" component={AdminPage}/>
                {/* Client app routes */}
                <Route exact path="/" component={HomePage} />
                <Route exact path="/item/:itemID" component={ItemDetailPage}/>
                <Route exact path="/collections/:collection" component={CollectionPage}/>
            </Switch>
        </Router>

    );
}

const HOC=（道具）=>{
const{component:component，…rest}=props；
返回(
)
}
const主页=（道具）=>{
返回(
{/*替换为主页内容*/}
)
}
const ItemDetailPage=（道具）=>{
返回(
{/*替换为ItemDetailPage内容*/}
)
}
const CollectionPage=（道具）=>{
返回(
{/*替换为CollectionPage内容*/}
)
}
函数App（）{
返回(
{/*管理员应用程序路由*/}
{/*客户端应用程序路由*/}
);
}

在查看添加的HOC代码时，我建议进行以下更改：

export default function ClientLayoutHOC(props) {
    const {component: Component, children, ...rest} = props;
    return (
        <div className="app">
            <Header />
                <Component {...rest}>
                    {children}
                </Component>
            <Footer />
        </div>
    )
}

导出默认函数ClientLayoutHOC（props）{
const{component:component，children，…rest}=props；
返回(
{儿童}
)
}

你能看看我的HOC；如果我取消注释，它将中断。使用

{props.children}

instead我不确定您提供给组件的子组件是什么，例如示例中的HomePage、ItemDetailPage和CollectionPage都是具有空“children”属性的路由组件。当组件以/>结尾时，您不提供子组件。为了有子项，您需要在组件标记的开始标记和结束标记之间有标记。e、 g.{/*这是您添加子项的地方*/}。您可以看看我的HOC；如果我取消注释，它将中断。使用

{props.children}

instead我不确定您提供给组件的子组件是什么，例如示例中的HomePage、ItemDetailPage和CollectionPage都是具有空“children”属性的路由组件。当组件以/>结尾时，您不提供子组件。为了有子项，您需要在组件标记的开始标记和结束标记之间有标记。e、 g.{/*这是添加子项的地方*/}。