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

Posted 2023-02-22

【中文标题】将路线与布局的其余部分分开 - 做出反应

【英文标题】：Seperate route from rest of layout - react

【发布时间】：2021-04-15 17:22:31

【问题描述】：

我有一个要添加管理页面的应用程序。我希望管理页面有自己的布局与客户端布局分开。我有什么当前和“最好”的方式来实现这一点？

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 组件并过滤页面吗？

【参考方案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>
    )

【讨论】：

你能看看我的HOC吗？如果我取消注释它会中断。

改用props.children

我不确定您为组件提供了哪些子项，例如您的示例中的 HomePage、ItemDetailPage 和 CollectionPage 都是具有空“子”属性的 Route 组件。当您的组件以 /> 结尾时，您没有提供孩子。为了有孩子，你需要在组件标记的开始和结束标记之间有标记。例如/*这是您添加孩子的地方*/.