Router DOM V 4−以前の書き方をまとめておく

npx create-react-app react-router 

Success! Created react-router at /Users/kaede0902/code/react-router
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

npm start

Compiled successfully!

You can now view react-router in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.61:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

npm i react-router-dom

added 13 packages, changed 6 packages, and audited 1721 packages in 31s

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router >
      <li>
        <Link to='/'>Home</Link>
      </li>
      <li>
        <Link to='/about'>About</Link>
      </li>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

<Router >
  <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}