Separate components files

src/App.tsx

@@ -1,66 +1,16 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import './index.css';
-
-const HomePage = () => (
-  <div>
-    <h1>Home</h1>
-    <p>Welcome!</p>
-  </div>
-);
-
-const PublicPage = () => (
-  <div>
-    <h1>Public page</h1>
-    <p>Nothing special here</p>
-  </div>
-);
-
-const PrivatePage = () => (
-  <div>
-    <h1>Private page</h1>
-    <p>Wake up, Neo...</p>
-  </div>
-);
-
-const AuthorizePage = () => (
-  <div>
-    <h1>Authorize</h1>
-    <button>Press to login</button>
-  </div>
-);
+import { Nav } from './Nav';
+import { HomePage } from './HomePage';
+import { PublicPage } from './PublicPage';
+import { PrivatePage } from './PrivatePage';
+import { AuthorizePage } from './AuthorizePage';
 
 const App: React.FC = () => {
   return (
     <BrowserRouter>
-      <header>
-        <ul>
-          <li>
-            <NavLink exact activeClassName='active' to='/'>
-              Home
-            </NavLink>
-          </li>
-          <li>
-            <NavLink exact activeClassName='active' to='/public'>
-              Public
-            </NavLink>
-          </li>
-          <li>
-            <NavLink exact activeClassName='active' to='/private'>
-              Private
-            </NavLink>
-          </li>
-        </ul>
-
-        <ul>
-          <li>
-            <NavLink exact activeClassName='active' to='/authorize'>
-              Authorize
-            </NavLink>
-          </li>
-        </ul>
-      </header>
-
+      <Nav />
       <main>
         <Switch>
           <Route exact path='/' component={HomePage} />

src/AuthorizePage.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const AuthorizePage = () => (
+  <div>
+    <h1>Authorize</h1>
+    <button>Press to login</button>
+  </div>
+);

src/HomePage.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const HomePage = () => (
+  <div>
+    <h1>Home</h1>
+    <p>Welcome!</p>
+  </div>
+);

src/Nav.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+export const Nav: React.FC = () => {
+  return (
+    <header>
+      <ul>
+        <li>
+          <NavLink exact activeClassName='active' to='/'>
+            Home
+          </NavLink>
+        </li>
+        <li>
+          <NavLink exact activeClassName='active' to='/public'>
+            Public
+          </NavLink>
+        </li>
+        <li>
+          <NavLink exact activeClassName='active' to='/private'>
+            Private
+          </NavLink>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <NavLink exact activeClassName='active' to='/authorize'>
+            Authorize
+          </NavLink>
+        </li>
+      </ul>
+    </header>
+  );
+};

src/PrivatePage.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const PrivatePage = () => (
+  <div>
+    <h1>Private page</h1>
+    <p>Wake up, Neo...</p>
+  </div>
+);

src/PublicPage.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const PublicPage = () => (
+  <div>
+    <h1>Public page</h1>
+    <p>Nothing special here</p>
+  </div>
+);