React-routerを利用したらHTMLファイルにアクセスするだけでは表示されなくなりました。

Question

実現したいこと

Githubページです。
React-routerを利用して、コンポーネントを表示する方法が知りたいです。

今まではhttps://ユーザ名.github.io/react_todo/public/index.htmlにアクセスするとHomeコンポーネントが表示されました。
しかしルーティングを目的にReact-routerをインストールすると、（当然ですが）/index.htmlにアクセスしてもHomeコンポーネントが表示されません。

HomeとTodoPageコンポーネントを表示するにはどうしたらいいのですか?

ルーティングは以下のようにしています。

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/todo" component={TodoPage} />
    </Router>
), document.getElementById('app'));

補足情報

• react-create-appではなくwebpack経由でReactをインストールしました
• react-scriptsの使用はエラーが多発して断念しました。

Answer 1

たぶんこんな感じでしょうか。

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

const BASE_PATH = '/react_todo/public';

ReactDOM.render((
    <BrowserRouter basename={BASE_PATH}>
        <Route exact path="/" component={Home} />
        <Route path="/index.html" component={Home} />
        <Route path="/todo" component={TodoPage} />
    </BrowserRouter>
), document.getElementById('app'));

• react-router v4 以降では Web 用の react-router-dom が追加されてます。
• Router の代わりに BrowserRouter を利用しましょう。browserHistory は不要です。
• サブディレクトリで動かす場合、BrowserRouter に basename を指定しましょう。
• <Route path="/"> には exact を指定しないと /todo にもマッチしてしまいます。
• index.html を Home にしたい場合、<Route path="/index.html"> も指定しましょう。
• たぶん <Swicth> も使った方がいい気がします。

参考: react-router v3からv4へのマイグレーション - Qiita

Comments

[退会済みユーザー]

ありがとうございます。