将路线与布局的其余部分分开 - 反应 [英] Seperate route from rest of layout - react

问题描述

我有一个应用程序，我想向其中添加管理页面.我希望管理页面具有与客户端布局分开的自己的布局.凭借我所拥有的，实现这一目标的当前和最佳"方式是什么?

app.js

import './App.css';import { BrowserRouter as Router, Route, Switch } from react-router-dom";从./pages/HomePage"导入主页；从 './pages/ItemDetailPage' 导入 ItemDetailPage；从'./components/Header'导入标题；从'./components/Footer'导入页脚；从 './pages/CollectionPage' 导入 CollectionPage；从 './pages/AdminPage' 导入 AdminPage；功能应用(){返回 (<路由器>{/* 管理应用路由 */}{/* <路由精确路径="/admin";组件={AdminPage}/>*/}{/* 客户端应用路由 */}<div className="app"><标题/><开关><路由精确路径=/";组件={主页}/><路由精确路径=/item/:itemID";组件={ItemDetailPage}/><路由精确路径=/collections/:collection";组件={CollectionPage}/></开关><页脚/>

</路由器>);}导出默认应用程序；

HOC

导出默认函数 ClientLayoutHOC(props) {const {component: Component, ...rest} = props;返回 (<div className="app"><标题/>{/*<组件{...rest}/>*/}{props.children}<页脚/>

)}

---

我发现了这个.我应该创建一个 AdminLayout 和 ClientLayout 组件并过滤页面吗?

解决方案

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

然后你的所有路由在 Router.Switch 中保持干净

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

const HOC = (props) =>{const {component: Component, ...rest} = props;返回 (<div className="app"><标题/><组件{...rest}/><页脚/>

)}const HomePage = (props) =>{返回 (<HOC>{/* 替换为主页内容*/})}const ItemDetailPage = (props) =>{返回 (<HOC>{/* 替换为 ItemDetailPage 内容*/})}const CollectionPage = (props) =>{返回 (<HOC>{/* 替换为 CollectionPage 内容*/})}功能应用(){返回 (<路由器><开关>{/* 管理应用路由 */}<路由精确路径="/admin";组件={AdminPage}/>{/* 客户端应用路由 */}<路由精确路径=/";组件={主页}/><路由精确路径=/item/:itemID";组件={ItemDetailPage}/><路由精确路径=/collections/:collection";组件={CollectionPage}/></开关></路由器>);}

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

导出默认函数 ClientLayoutHOC(props) {const {component: Component, children, ...rest} = props;返回 (<div className="app"><标题/><组件{...rest}>{孩子们}</组件><页脚/>

)}

I have an app that I want to add an admin page to. I want the admin page to have its own layout seperate from the client layout. With what I have what's the current and 'best' way to implement this?

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

---

I found this. Should I create an AdminLayout and ClientLayout components and filter the pages through?

解决方案

You could create a High Order Component and add it to your non-admin pages like this: The HOC can contain your div wrapper and the Header and Footer.

Then all of your routes stay clean in the Router.Switch

The anonymous functions for HOC, HomePage, ItemDetailPage, and CollectionPage below are meant to be samples of the changes you'll make to those components. The HOC component will be a separate component too.

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>

    );
}

In looking at your added HOC code I would suggest the following changes:

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

这篇关于将路线与布局的其余部分分开 - 反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！