React Ant Design - how to properly split a Layout? And how can Routing be implemented with a different Layout?

Question

React

Hello everyone,

I want to use Ant Design, but I ran into one problem... there are different Routes with different designs.

Well, for example: Login, NotFound, etc... I

found only something like this on the net, but it doesn’t fit, since the same Layout (Header, Footer) will be present everywhere:

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

well, in each component, include the same code ( <Footer/> | <Footer2/>)
is also somehow not right.

Yes, and how can this be divided into Header and 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

I realized that no one reads the documentation))
But maybe you didn't know what to look for, and not knowing how to ask the right questions
Leads to wrong answers.
I understood you thanks to the detailed explanation.

your hint is here

Вы ищите children `React`
- https://ru.reactjs.org/docs/composition-vs-inherit...
- https://medium.com/@stasonmars/%D0%BF%D0%BE%D0%B3%...
Первая ссылка: пример из документации на примере классов
Вторая ссылка: примеры реализации и использования children

For those who want to use functions rather than classes, there is this solution:

Your solution is here

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

Profit?