在React Router v6中实现共享布局

由于我想在React Router V6中实现类似共享布局的东西，所以我进行了一番调查和实现，以下是我留下的实现方法的笔记。

結論是：使用”Outlet”

可以通过使用插座来实现。

假设我们想要在以下的布局中切换主要内容：标题、主要内容、页脚。
我们将标题和页脚作为通用布局，并创建如下的通用布局组件。

import { FC } from "react"

//Outletをインポート
import { Outlet } from 'react-router-dom';


export const Layout: FC = () => {


    return (
        <>
            <header>
                ヘッダー
            </header>

            //ここが切り替わる
            <Outlet />

            <footer>
                フッター
            </footer>
        </>
    )

}

重点是，切换了Outlet的部分。
路由可按如下方式编写。

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';


// コンポーネントのインポート
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { About } from './components/About';
import { Contact } from './components/Contact';

const container = document.getElementById('app');
const root = createRoot(container!); 

root.render(
    <React.StrictMode>

    <BrowserRouter>
        
        <Routes>
            
            <Route path="/" element={<Layout />}>
                <Route path="/home" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
            </Route>
        </Routes>
        </BrowserRouter>
    </React.StrictMode>

);

在Layout的路由中嵌套想要切换的组件路由（主要内容）。
Layout组件的Outlet部分会被嵌套的组件替换掉。

闲谈：如果不想采用通用布局

有些页面可能不希望应用共同布局。
这可以很容易地实现。
例如，假设存在一个名为Login的组件，如果不需要应用共同设计，则可以在外部而不是Layout的Route的嵌套中编写。

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';


// コンポーネントのインポート
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { About } from './components/About';
import { Contact } from './components/Contact';

const container = document.getElementById('app');
const root = createRoot(container!); 

root.render(
    <React.StrictMode>

    <BrowserRouter>
        
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={<Layout />}>
                <Route path="/home" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
            </Route>
        </Routes>
        </BrowserRouter>
    </React.StrictMode>

);

就是这样。