React Router のサンプル説明をしていきます。
React Router を理解する際に、こちらのサイトを参考に勉強いたしました。
Routerとは？から始まり、非常に詳しく説明されていますので、一読されることをお勧めいたします。
ルーティングライブラリ、React Router(v5)入門
https://zenn.dev/yumemi_inc/articles/2020-09-22-react-router#uselocation
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import React, { Component } from 'react'; import { BrowserRouter, Route, Switch, Link } from 'react-router-dom'; import Demo1 from './demo/Demo1'; import Demo2 from './demo/Demo2'; const App = () => { return ( <BrowserRouter> <ul> <li> <Link to="/">Top</Link> </li> <li> <Link to="/demo/demo1/">demo1</Link> </li> <li> <Link to="/demo/demo1/1">demo1-1</Link> </li> <li> <Link to="/demo/demo1/2">demo1-2</Link> </li> <li> <Link to="/demo/demo2/">demo2</Link> </li> </ul> <Switch> <Route exact path="/demo/demo1" component={Demo1} /> <Route exact path="/demo/demo1/:no" component={Demo1} /> <Route exact path="/demo/demo2" component={Demo2} /> <Route exact path="/demo/demo2/:no" component={Demo2} /> <Route> <NotFound /> </Route> </Switch> </BrowserRouter> ); } export default App; |
全ソース
GitHub - prettytabby/react-sample2: reactサンプルプログラム2
reactサンプルプログラム2. Contribute to prettytabby/react-sample2 development by creating an account on GitHub.
github.com
公式サイト
React – ユーザインターフェース構築のための JavaScript ライブラリ
ユーザインターフェース構築のための JavaScript ライブラリ
js.legacy.reactjs.org
