react router

SPA アプリケーションはますます複雑で多様化しています。そのため、従来のWeb開発方式では、開発済みアプリケーションの開発と維持がますます困難になり、Web開発方式も発展してきた。現在のネットワーク開発の目標はSPAである。SPAは1ページのアプリケーションで、htmlファイルが1つしか含まれていないので、メンテナンスに優れています。

Router SPAは、htmlのアプリケーションであり、routerを使用して1つのhtmlに複数のページを表示します。ルーティングは、異なるパス(アドレス)に基づいて異なる画面を表示する機能であり、応答自体に埋め込まれていない機能であるため、応答でルーティング機能を使用するにはreact-routerという別のサードパーティライブラリをインストールする必要がある。 react-routerは(npm install react-router-dom-)を入力してインストールできます。(package.jasonでバージョンレコードを保持するには--saveを入力します)

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
					<Route exact path="/signup" component={Signup} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

ReactDOM.render(<Routes />, document.getElementById('root'));