[Smart-Z] React - react-router使う

react-router

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