React Router 基本

インストール

npm install --save-dev react-router react-router-dom

必要なファイル

index.js ## エントリーのファイル
App.js ## index.jsで読み込む最初のコンポーネント
First,Second,Third ## リンクさせたいコンポーネント

index.jsにルーティングを定義する

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import First from './components/First';
import Second from './components/Second';
import Third from './components/Third';
import { BrowserRouter as Router, Route } from "react-router-dom";  # react routerのパッケージ読み込み

ReactDOM.render(
  <React.StrictMode>
    <Router>  ## ここでルーティング読み込み
     <Route exact path="/" component={App}></Route>  # exactは react router exactで検索してください
     <Route path="/first" component={First}></Route>
     <Route path="/second" component={Second}></Route>
     <Route path="/third" component={Third}></Route>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

遷移させる

import React from 'react';
import './App.css';
import { Link } from "react-router-dom";   # Linkが必要
 
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render () {
    return (
      <div className="App">
        <Link to="/first">first</Link>  # toにパスを入れてあげればOK
        <br/>
        <Link to="/second">second</Link>
        <br/>
        <Link to="/third">third</Link>
      </div>
    );
  }
}

export default App;

Linkにパラメーターを渡す

Link のtoにパラメーターを渡す
受けては props.match.paramsで取れる見たい

渡す設定

index.js

ReactDOM.render(
  <React.StrictMode>
    <Router>
     <Route exact path="/" component={App}></Route>
     <Route path="/first/:id" component={First}></Route> # "/first/:id"に変更

受けとる

import React from 'react';

class First extends React.Component {
  constructor(props) {
    super(props)
  }
  

  render () {
    console.log(this.props.match.params.id) # もっといいやり方ありそう
    return (
      <div className="First">
        First
      </div>
    );
  }
}

export default First;

参考記事

qiita.com

パラメーターを渡す