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

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>
    )
}

---

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

Answer 1

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

那么你所有的路由都在 Router.Switch 中保持干净

下面的 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>
    )
}