React ルーター
Create React Appにはページルーティングは含まれません。
React Routerは一般的なソリューションです。
Reactルーターを追加
アプリケーションにReact Routerを追加するには、アプリケーションのルートディレクトリからターミナルでこれを実行します。
npm i -D react-router-dom
ノート：このチュートリアルではReact Router v6を使用します。
v5からアップグレードする場合は、@latestフラグを使用する必要があります。
npm i -D react-router-dom@latest
フォルダ構造
複数のページルートを持つアプリケーションを作成するには、まずファイル作成から始めましょう。
srcフォルダー内に、いくつかのファイルを含むpage という名前のフォルダーを作成します。
src\pages\:
Layout.jsHome.jsBlogs.jsContact.jsNoPage.js
各ファイルには、非常に基本的なReactコンポーネントが含まれます。
基本的な使い方
次に、index.jsファイルでRouterを使用します。
例
React Routerを使用して、URLに基づいてページにルーティングします。index.js:
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
例の説明
まずコンテンツを<BrowserRouter>でラップします。
次に、<Routes>を定義します。アプリケーションは複数の<Routes>を持つことができます。この基本的な例では1つだけを使用します。
<Route>はネストできます。最初の<Route>には/のパスがあり、Layoutコンポーネントをレンダリングします。
ネストされた<Route>は親ルートを継承し、親ルートに追加します。したがって、blogsパスは親と結合されて、/blogsになります。
Homeコンポーネントのルートにはパスはありませんが、index属性があります。これにより、このルートが親ルート(/)のデフォルトルートとして指定されます。
pathを*に設定すると、未定義のURLのキャッチオールとして機能します。これは404エラーページに最適です。
ページ/コンポーネント
Layoutコンポーネントには<Outlet>要素と <Link>要素があります。
<Outlet>は、選択されている現在のルートをレンダリングします。
<Link>は、URLを設定し、閲覧履歴を追跡するために使用されます。
内部パスにリンクする場合は常に、<a href="">の代わりに<Link>を使用します。
「レイアウトルート」は、ナビゲーションメニューなど、すべてのページに共通のコンテンツを挿入する共有コンポーネントです。
Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
Home.js:
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js:
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js:
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;