- はじめに このセクションでは、React Routerを使ってページ間を移動する方法を学びましょう。GeekとGalが手順を説明してくれるので、初心者でも上級者でも簡単に理解できます！
React Routerは設定できたけど、どうやってページ間を移動するの？
うん、簡単にページを切り替える方法を知りたいな！
大丈夫！一緒に手順を見ていこう！😄
- ステップ1：Linkコンポーネントの使用
ページ間を移動するには、
react-router-dom
から
Link
コンポーネントを使います。HTMLのアンカータグに似ていますが、もっと強力でReact Routerとの相性も抜群です！
ああ、ファンシーな
<a>
タグみたいなものか！かっこいい！
- ステップ2：ナビゲーションリンクの作成
そう！それじゃあ、
Link
コンポーネントを使ってナビゲーションリンクを作成しましょう。めちゃくちゃ簡単！
to
プロパティでパスを指定するだけよ！
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">ホーム</Link>
</li>
<li>
<Link to="/about">アバウト</Link>
</li>
</ul>
</nav>
);
}
簡単だね！
Link
コンポーネントに
to
プロパティを使えばいいんだ！
その通り！これでアプリ内で簡単にページ間を移動できるよ！
- ステップ3：ナビゲーションコンポーネントの追加
最後に、
Navigation
コンポーネントをアプリに追加しましょう。これで完璧です！
import Navigation from './Navigation';
function App() {
return (
<div>
<Navigation />
{/* ... 他のコンポーネントやルート ... */}
</div>
);
}
すごいね！
Link
コンポーネントを使ってナビゲーションメニューを作成し、ページ間を切り替えることができるようになった！
その通り！React Routerを使ったスムーズなナビゲーションを楽しんでね！🚀
- おわりに
Reactアプリでページ間を移動するのは、React Routerを使えば簡単です！次の手順に従ってください：
Linkコンポーネントを使ってナビゲーションリンクを作成し、toプロパティを使ってパスを指定し、ナビゲーションコンポーネントをアプリに追加します。これでReactアプリで簡単にページ間を切り替えることができます！😎