React Ant Design — как правильно разбить Layout? И как можно реализовать Routing с разным Layout?

Question

[symnoob]

Всем Привет,

Охота использовать Ant Design, но столкнулся с одной проблемой... есть разные Route с разным дизайном.

Ну к примеру: Login, NotFound итд...

в нете нашёл только что-то вроде, но это не подходит, так как везде будит присутствовать один и тот же Layout (Header, Footer):

<Header/>
<Router>
    <Switch>
        <Route exact path="/" component={App}/>
        <ProtectedRoute exact path="/welcome" component={Welcome}/>          
     </Switch>
</Router>
<Footer/>

ну а в каждом компоненте инклюдить один и тот же code (<Footer/> | <Footer2/>)
тоже как то не то

Да и как такое на Header и Footer разбить?

<Layout>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
      onBreakpoint={broken => {
        console.log(broken);
      }}
      onCollapse={(collapsed, type) => {
        console.log(collapsed, type);
      }}
    >
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        <Menu.Item key="1" icon={<UserOutlined />}>
          nav 1
        </Menu.Item>
        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
          nav 2
        </Menu.Item>
        <Menu.Item key="3" icon={<UploadOutlined />}>
          nav 3
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
          /*
           =>=>=>=> Тогда как бы здесь должен быть Router
         */
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>©2018 any footer</Footer>
    </Layout>
  </Layout>,

Answer 1

[Игорь Васильев]

Я понял, что никто не читает документацию ))
Но возможно вы не знали что именно искать, и не умение задавать правильные вопросы
Приводит к неправильным ответам.
Я понял вас благодаря подробному объяснению.

ваша подсказка тут

Вы ищите children `React`
- https://ru.reactjs.org/docs/composition-vs-inherit...
- https://medium.com/@stasonmars/%D0%BF%D0%BE%D0%B3%...

Первая ссылка: пример из документации на примере классов
Вторая ссылка: примеры реализации и использования children

Для тех кто хочет юзать функции а не классы, есть вот такое решение:

Ваше решение здесь

import React from 'react'
import { HeadProvider, Title  } from 'react-head'
import { Link, useLocation } from 'react-router-dom'

export function AdminLayout({children, title = 'Your title'})
{
    
    let location = useLocation()

    return (
        <>
            <HeadProvider>
                <Title>{title}</Title>
            </HeadProvider>
            <header>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/dashboard">Dashboard</Link>
                        </li>
                    </ul>
                </nav>
            </header>
            {location.pathname} {/* Здесь инфа о текущей ссылке после слэша */}
            {children} {/* Здесь будет информация из компонента который обернёте */}
            <div>Footer</div>
        </>
    )
}

Обёртку делаем вот так:

import React from 'react'
import { AdminLayout } from './components/AdminLayout'

export default function About() 
{
    const Title = 'About'
    
    return (
        <AdminLayout title={Title}>
            <h2>{Title}</h2>
            <p>there is some fucking text that is not interesting to anyone.</p>
        </AdminLayout>
    )
}

Профит ?

Comments

[symnoob]

Вы только что спасли несколько дней моей жизни!
работая Композициями для компонентов, есть ли какие проблемы или особенности на что нужно обращать внимание?

[Игорь Васильев]

symnoob, если переменная в функции "обёртки" без значения по умолчанию пустая
как в случае с чилдрен переменной - будет ошибка. Или тайтл напишите без значения:

export function AdminLayout({children, title}) // Оба поля обязательные они не имеют значения по умолчанию
{
    ...
}

вы можете передавать любые пропсы, хоть целые массивы, чтобы не было путаницы, для каждого лэйаута делайте свои импорты стилей. Можно конечно и встроенные делать:

export function AdminLayout({children, , title = 'Your title'})
{
    ...
    <style jsx>{` // можно добавить global чтобы применилось ко всем страницам
        .main {
            width:80%;
            background-color: #012444;
        }
    `}
     </style>
}

Быть осторожным только с передачей данных, чтобы прилетали проверенные данные.
В npm уже 4 библиотеки вирусные попали, так что будьте осторожны, учите TypeScript и делайте свои библиотеки. Своё как-то надёжнее + лицензия. Можете оборачивать лэйауты провайдерами и контекстом, чтобы не тянуть данные через все компоненты, будет у вас "умный" компонент. Ну и учите React - в документации можно найти куда больше, чем вы можете предположить. Я это решение нашёл там.