从布局的其余部分分离的路线-反应

Question

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

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;

HOC

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

我找到了这个。我应该创建一个AdminLayout和ClientLayout组件并过滤页面吗？

Answer 1

您可以创建一个高阶组件，并将其添加到非管理员页面，如下所示：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>

    );
}

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

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