在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>
);
就是这样。