react-routerの使い方
react-routerを使って、Single Page Application (SPA) を作成する。
1. react-router、react-router-domをインストールする。
npm install --save-dev react-router react-router-dom
2. 使い方(例)。
main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import App from './App';
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact={true} render={() => <Redirect to="/main/home" />} />
<Route path="/main" exact={true} render={() => <Redirect to="/main/home" />} />
<Route path="/main" render={props => <App {...props} />} />
<Route path={"/:errpath"} render={() => <Redirect to="/main/home" />} />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
デフォルトパスなど("/", "/main")と存在しないパスも"/main/home"にリダイレクトする。 Switchについて、URLは一つRouteのpathとマッチすれば、そのRouteのみを表示する。複数がマッチしても、最初のものしか表示しない。 Switchが使わない場合、複数のマッチRouteがすべて表示される。
注意点:webpack-dev-serverを使ってテストしている場合、index.htmlにある参照ファイルのパスは絶対パスにしないと、 webpackの自動再ロードはできなくなる。例:
<script src="js/jquery.min.js"></script> NG
<script src="/js/jquery.min.js"></script> OK