#[React]ルーティングの基礎
開発環境
CodeSandboxを使用します。
導入方法についてはこちらを参考に導入してください。
最終的なコード
App.jsx
import { BrowserRouter, Link } from "react-router-dom";
import { Home } from "./Home";
import { Page1 } from "./Page1";
import { Page2 } from "./Page2";
export default function App() {
return (
<BrowserRouter>
<div className="App">
<Link to="/">Home</Link>
<br />
<Link to="/Page1">Page1</Link>
<br />
<Link to="/Page2">Page2</Link>
</div>
<Switch>
<Route exact path="/">
<Home />
<Route path="/page1">
<Page1 />
</Route>
<Route path="/page2">
<Page2 />
</Route>
<Switch>
</BrowserRouter>
);
}
遷移先のコンポーネントを以下の通りに作成しておく。
Page1、Page2も同様に作成。
Home.jsx
export const Home = () => {
return (
<div>
<h1>Homeです</h1>
</div>
);
};
<BrowserRouter>
react-router関連のコンポーネントは全て<BrowserRouter> ~ </BorwserRouter>で囲って使います。
App.jsx
import { BrowserRouter, Link } from "react-router-dom";
export default function App() {
return (
<BrowserRouter>
<-- 各リンク先の記述 -->
</BrowserRouter>
);
}
<Link to=~~~>
aタグみたいにリンクタグを用意してくれる。
<Switch>
パス毎にどのコンポーネントを表示するかを決めるためのタグ。
<Route>
<Route />にはルーティング先のURLと、そのURLで表示したいコンポーネントを指定する。
exactを書くと完全一致するか判定される。
path="/"としていて、exactを書いておかないとどのパスでもHomeにレンダリングされてしまう。