React + Reduxを基本からまとめてみた【6】【ルーティングの設定】

ルーティング(Routing)とは

『ルーティング(Routing)』とは、ユーザーからの入力に応じて表示させるページを出し分ける処理のこと。

ルーティングの設定

connected-react-routerを利用してルーティングする

ルーティング用ライブラリ

1.react-router v4以降
⇨ Reactのルーティング用ライブラリ
※ Reduxとは関係なく、Reactで利用可能

2.connected-react-router
⇨ ReduxのStoreでルーティングを管理
※ react-router v4 & v5と互換性あり

middlewareとは

[React-Reduxを基本からまとめてみた【7】【Redux Middleware】]
(https://qiita.com/kanfutrooper/items/4170ad576de4a6d55ad5)

middlewareの導入

store.js

//src/reducks/store/store.js
import {
    createStore as reduxCreateStore,
    combineReducers,
    applyMiddleware
} from "redux";
import { connectRouter, routerMiddleware } from "connected-react-router";
import { UsersReducer } from "../users/reducers";

export default function createStore(history) {
    return reduxCreateStore(
        combineReducers({
            router: connectRouter(history),
            users: UsersReducer
        }),
        applyMiddleware(
            routerMiddleware(history)
        )
    );
}

StoreとRouterの接続

index.js

//src/index.js
import { ConnectedRouter } from "connected-react-router";
import * as History from 'history';

const history = History.createBrowserHistory();
export const store = createStore(history);

ReactDOM.render(
  <Provider store={store}>
      <ConnectedRouter history={history}>
          <App />
      </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();

Routerコンポーネントを作る

Router.jsx

src/Router.jsx
import React from "react";
import { Route, Switch } from "react-router";
import { Login, Home } from "./templates";

const Router = () => {
    return (
        <Switch>
            <Route exact path="/login" component={Login} />
            <Route exact path="(/)?" component={Home} />
        </Switch>
    );
};
export default Router;

1.Routeコンポーネントでパスとコンポーネントを指定する
2.exactは「パスとぴったり一致したら」という意味。
Switchコンポーネントと一緒に使う。

Routerコンポーネントを使う

App.jsx

src/App.jsx
import React from "react";
import Router from "./Router";

const App = () => {
    return (
        <main>
            <Router />
        </main>
    );
};
export default App;

templatesファイルの作成

Login.jsx

//src/templates/Login.jsx
import React from "react";
import { useDispatch } from "react-redux";
import { push } from "connected-react-router";

const Login = () => {
    const dispatch = useDispatch();
    return (
        <div>
            <h2>ログイン</h2>
            <button onClick={() => dispatch(push('/'))}>
                ログイン
            </button>
        </div>
    );
};

export default Login;

Home.jsx

//src/templates/Home.jsx
import React from "react";

const Home = () => {
    return (
        <h2>Home</h2>
    );
};
export default Home;

参考サイト

[日本一わかりやすいReact-Redux入門#7...URLに応じたコンポーネントを表示しよう]
(https://www.youtube.com/watch?v=nBB1rMLnrUc)
[React- Redux 入門]
(https://qiita.com/shtwangy/items/4f9993ade64c3c6858d3#%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%A8%AD%E5%AE%9A)
[React.jsでルーティングを実装するためのreact-routerの紹介]
(https://code-ship-blog.wemotion.co.jp/technology/react-js%E3%81%A7%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEreact-router%E3%81%AE%E7%B4%B9%E4%BB%8B/)