【React】最小限のreact-router実装で仕組みを理解する

概要

react-routerの使い方を理解するために最小限の実装をする

成果物

手順

1. Reactの新規プロジェクト作成
2. react-routerをインストール
3. srcディレクトリの中身を削除
4. index.jsとApp.jsを作成

1. Reactの新規プロジェクト作成

$ npx create-react-app hogehoge

2. react-routerをインストール

$ cd hogehoge
$ npm install react-router

3. srcディレクトリの中身を削除

$ rm -rf ./src/*

4. index.jsとApp.jsを作成

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './App.js';

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

App.js

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

function Index(){
    return <h2>Home page is here!</h2>
}

function About(){
    return <h2>This is About page.</h2>
}

function Users(){
    return <h2>This is User page.</h2>
}

function AppRouter(){
    return(
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to='/'>Home</Link>
                        </li>
                        <li>
                            <Link to='/about/'>About</Link>
                        </li>
                        <li>
                            <Link to='/users/'>Users</Link>
                        </li>
                    </ul>
                </nav>
                <Route path='/' exact component={Index} />
                <Route path='/about/' component={About} />
                <Route path='/users/' component={Users} />
            </div>
        </Router>
    );
}

export default AppRouter;

Happy Hacking !

参考