@symnoob

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

Всем Привет,

Охота использовать 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>,
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
Isolution666
@Isolution666
творческая личность
Я понял, что никто не читает документацию ))
Но возможно вы не знали что именно искать, и не умение задавать правильные вопросы
Приводит к неправильным ответам.
Я понял вас благодаря подробному объяснению.
ваша подсказка тут

Вы ищите 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>
    )
}




Профит ?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы