[react]反応-router-domの適用

react-router-domとは

reactはSPA(Single Page Application)です.
react-router-domは、SPAが画面を切り替えるためのモジュールである.

簡単な入門

create-act-appで簡単なプロジェクトを作成します.

npm create-react-app react-router-tutorial

対応するプロジェクトフォルダに移動し、反応ルータをインストールしてください.

cd react-router-tutorial
npm react-router-dom

レスポンスファイルの設定

フォルダとファイルを以下のように構成してください.

src/index.js

Entry pointとして指定されたファイル.

import React from 'react';
import ReactDom from 'react-dom';
import Router from './router';

ReactDom.render(<Router />, document.getElementById('root'));

src/router/index.js

BrowserRouterタグを使用してルーティングを行います.route要素のpath属性は、配線時にcomponent属性の要素として表示される.exactプロパティは、pathプロパティのパスと完全に一致している場合にのみ表示されます.

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Menu from '../components/menu';
import Home from '../pages/home';
import Login from '../pages/login';

function index() {
  return (
    <BrowserRouter>
      <Menu />
      <Route exact path="/login" component={Login} />
      <Route path="/" component={Home} />
    </BrowserRouter>
  );
}

export default index;

src/components/menu/index.js

SPAは<a href="#">somewhere</a> などのフォーマットを使用するべきではありません.a tagはページ移動時にリフレッシュされるので、ここではa tagではなくreact-routerのLinkコンポーネントを使用します.

import React from 'react';
import { Link } from 'react-router-dom';

function index() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/login">login</Link>
        </li>
      </ul>
      <hr />
    </div>
  );
}

export default index;

src/pages/home/index.js

画面遷移を表示する簡単なコンポーネントを作成します.

import React from 'react';

function index() {
  return <div>home</div>;
}

export default index;

src/pages/home/index.js

import React from 'react';

function index() {
  return <div>login</div>;
}

export default index;

アプリケーションの実行

/パス
/loginパス

パスを直接入力し、移動時に“Cannot GET /login” と同様のエラーを返す場合は、 webpack.config.jsを変更します.

    devServer: {
        historyApiFallback: true
    },

従ってreact−router−domを簡単に適用した.詳細と詳細については、公式サイトを参照してください.お読みいただきありがとうございます:)
https://reactrouter.com/web/guides/quick-start