react-router-dom(ルーティング)

#react-router-domの導入

$ npm i -S react-router-dom

react-router-domをインストールします。

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './Home'
import About from './About'
  
  const App = () => {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path={'/'}>
            <Home />
          </Route>
          <Route exact path={'/about'}>
            <About />
          </Route>
        </Switch>
      </BrowserRouter>
    )
  }
  
  export default App

 <Route exact path={'/about'}>
   表示される範囲
 </Route>

<BrowserRouter>
ここの中にルーティングを設定していきます。他にもHashRouterなどあり、
HashRouterの場合は/#/aboutのようなルーティングになります。

<Switch>
Switchコンポーネントがなくても動きますが
URLにマッチしている全てのものが表示されるため
思いもよらない挙動してしまうためSwitchコンポーネント囲う方が良いです。

<Route exact path={'/about'}>
path="URL"
表示されるURLです。
exactは完全一致していたら表示できます。

  <Link to="/">
    Home
  </Link>
  <Link to="/about">
    About
  </Link>

使いたいところで <Link to="/">など書けば完成です。