React | Routerのサンプルプログラム | 修ちゃんの技術資料

React Router のサンプル説明をしていきます。

React Router を理解する際に、こちらのサイトを参考に勉強いたしました。
Routerとは？から始まり、非常に詳しく説明されていますので、一読されることをお勧めいたします。

ルーティングライブラリ、React Router(v5)入門
https://zenn.dev/yumemi_inc/articles/2020-09-22-react-router#uselocation

App.js
全ソース
公式サイト

App.js

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;