react-router-domの基本的な使い方

react-router-domのおおまかな使い方を書いて行きます。

環境構築は以下参照
itsakura.com

1.react-router-domのインストール

Vscodeでターミナルを開き、

npm install react-router-dom

と入力し、インストールします。

2.ルーティングの設定

import React from 'react';
import { Link,BrowserRouter, Route } from 'react-router-dom';
import Work from './component/Work';
import Home from './component/Home';
import Skil from './component/Skil';
import Contact from './component/Contact';
class Menu extends React.Component{
    render(){
        return(
            <BrowserRouter>
            <div className='menu'>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/work'>Work</Link></li>
                    <li><Link to='/skil'>Skil</Link></li>
                    <li><Link to='/contact'>Contact</Link></li>
                </ul>
            </div>
            <Route exact path={'/'} component={Home}/>
            <Route path={'/skil'}  component={Skil}/>
            <Route path={'/work'} component={Work}/>
            <Route path={'/contact'} component={Contact}/>
            </BrowserRouter>

        );
    }
}
export default Menu;

完成図はこんな感じです。
コンポーネントはあらかじめ作ってあります。
まず、

import { Link,BrowserRouter, Route } from 'react-router-dom';

でreact-router-domから必要なモジュールをインポートします。
全体をBrowserRouterで囲んで、子要素にRouteとLinkをいれて使用します。
Linkはaタグとおんなじ感じです。to属性でリンク先のURLを指定します。
Routeがpathに指定したものと一致していた場合、componentを描写する感じです。
Route path={'URL'} でリンクを押してURLを切り替えることが出来るようになります。

ざっくり説明するとこんな感じです、コードを見るよりも使ってみた方が、理解できると思うので、ぜに使ってみて下さい。

公式サイト
https://reacttraining.com/react-router/web/guides/quick-start