react-router를 이용하여 간단한 어플리케이션 생성

package.json

@@ -32,6 +32,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-hot-loader": "^4.6.5",
-    "react-prop-types": "^0.4.0"
+    "react-prop-types": "^0.4.0",
+    "react-router-dom": "^4.3.1"
   }
 }

src/components/App.js

@@ -1,6 +1,21 @@
 import React from "react";
-import { hot } from 'react-hot-loader/root'
+import { hot } from "react-hot-loader/root";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
-const App = () => <div>hoilzzzz</div>;
+import Home from "./Home";
+import AsyncPage from "./AsyncPage";
+import NoPage from "./NoPage";
+
+const App = () => (
+  <Router>
+    <div>
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route exact path="/async" component={AsyncPage} />
+        <Route component={NoPage} />
+      </Switch>
+    </div>
+  </Router>
+);
 
 export default hot(App);

src/components/AsyncPage.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const AsyncPage = () => (
+  <div>
+    <div>
+      <Link to="/">home으로 이동하기</Link>
+    </div>
+    AsyncPage 입니당.
+  </div>
+);
+
+export default AsyncPage;

src/components/Home.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from 'react-router-dom';
+
+const Home = () => <div>
+  <div>
+  <Link to="/async">async로 이동</Link>
+
+
+  </div>
+  hoilzz 의 home 입니다
+  </div>;
+
+export default Home;

src/components/NoPage.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const NoPage = () => <div>404입니다</div>;
+
+export default NoPage;