LoginSignup
1

More than 3 years have passed since last update.

【React】 routing を設定してみる

Last updated at Posted at 2020-11-29

はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です

routing を 設定してみる

routing とはこのURLにアクセスするとこの画面を表示しますっていうやつです。

まずは必要なライブラリをインストール

$ yarn add react-router-dom 

今回の目標としては Home, A, B の 3つのコンポーネントを準備し、

  • localhost:3000 にアクセスすると Home component を表示
  • localhost:3000/A にアクセスすると A component を表示
  • localhost:3000/B にアクセスすると B component を表示

を目指します。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route  } from "react-router-dom"

const Home = () => {
  return(<p>ホーム画面です</p>) 
}

const A = () => {
  return(<p>A画面です</p>) 
}

const B = () => {
  return(<p>B画面です</p>) 
}

const  App= () => {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/A" component={A} />
      <Route path="/B" component={B} />
    </BrowserRouter>
  )
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


localhost:3000/A にアクセス
スクリーンショット 2020-11-29 11.52.40.png

表示成功

localhost:3000, localhost:3000/B も正常に表示されていました。

まとめ

  • routing には react-router-dom を使うと良い
    • yarn add react-router-dom を実行するだけでインストール可
    • ファイルの先頭に import { BrowserRouter, Route } from "react-router-dom" を書く

今回は react-router-dom の中から BrowserRouter, Route だけを使いましたが、他にも Switch や Link, NaviLink など便利なものがいろいろあります。適宜使う時はどれも import するだけでOK

  • 補足 「exactについて」

<Route exact path="/" component={Home} /> の exact って何?って思った方もいると思います。

routing は URLの前方一致で最初に一致した component が表示されてしまいます。
ですが、exactを使うと 完全一致で一致した場合のみ表示されます。

今回の例で言うと/Aにアクセスした時に/がまずHome componentへの routing に一致してしまうので/AにアクセスするとHome画面が表示されます。
それを防ぐ意味でexactを追記しています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1