🈯
<Outlet>の使い方
<Outlet>の機能説明
<Outlet>は、React Routerを使用する際に、親コンポーネント内で子コンポーネントを表示するためのプレースホルダー（占有位置）として機能します。具体的には、親ルートが一致したときに、その場所に対応する子ルートがレンダリングされます。
詳細な説明
- 親コンポーネント内に
<Outlet>を配置することで、その場所に子コンポーネントがレンダリングされるようにします。 - 例えば、
/aboutパスにアクセスすると、<Outlet>はAboutコンポーネントを表示します。
イメージ
具体的なコードは後述しますが、全体イメージは以下の通りです。
例えば共通のレイアウト（今回の例ではNavigation）を提供したい時、Outletはとても便利ですね。
具体的な例
次の例を使って詳しく説明します。
App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
</Routes>
</Router>
);
}
export default App;
Layout.js
import { Outlet, Link } from 'react-router-dom';
function Layout() {
return (
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<hr />
<Outlet /> {/* ここに子コンポーネントが表示される */}
</div>
);
}
export default Layout;
Home.js
function Home() {
return <h2>Home</h2>;
}
export default Home;
About.js
function About() {
return <h2>About</h2>;
}
export default About;
Contact.js
function Contact() {
return <h2>Contact</h2>;
}
export default Contact;
動作の確認
-
/: ホームページ（Homeコンポーネント）が表示される。 -
/about:Aboutコンポーネントが<Outlet>の場所に表示される。 -
/contact:Contactコンポーネントが<Outlet>の場所に表示される。
実際の動作は以下のcodesandboxから確認できます。
おさらい
-
<Outlet>は親コンポーネント内に配置され、子ルートが一致したときに、その場所に対応する子コンポーネントをレンダリングします。 - これにより、親ルートが一致する場合に、動的に異なる子コンポーネントを表示することができます。
参考
Discussion