Scaffolding components with React Router (BrowserRouter/Link).

README.md

@@ -1151,12 +1151,35 @@ Instead of passing in the userId to the UserHeader component, and make each comp
 
 Features:
 
-- React Router
-- Authentication (OAuth)
-- Forms
-- CRUD
+- React Router (section 20)
+- Authentication (OAuth) (section 21)
+- Forms (section 23)
+- CRUD (section 24)
 - Error handling
 
+### Types of Routers
+
+[ReactRouter](https://reactrouter.com/) comes with 3 types of routers. Which one to use depends on your deployment situation (what web server you use and how you can/want to configure it).
+
+- BrowserRouter
+  - path `/page1` => url `https://host:port/page1`
+  - configure your web server to route all unknowns to `index.html`.
+- HashRouter
+  - path `/page1` => url `https://host:port/#/page1`
+  - configure your web server to ignore everything behind `#`.
+- MemoryRouter
+  - path `/page1` => url `https://host:port`
+  - URL is constant. Easy to deploy but no way to bookmark parts of your application.
+
+#### Traditional web server vs. React Dev server
+
+A React application is typically a single page application that is served by `/index.html`. Web servers automatically serve `index.html` if you request `/`. But what happens if you request a resource `/page2` that the server doesn't know of (NB: the React Router path `/page2` only has meaning inside the React application, which runs inside the browser)?
+
+- Traditional web server will return HTTP 404 by default.
+- React Dev web server is configured to return `/index.html`.
+
+In other words, your bookmarks for specific pages inside your React app won't work, unless you configure your web server so that it routes those paths to `/index.html`.
+
 # Appendix: JavaScript
 
 ### Named vs. default exports

streams/client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.6.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

streams/client/src/components/App.jsx

@@ -1,8 +1,28 @@
 import React from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+import StreamList from "./streams/StreamList";
+import StreamShow from "./streams/StreamShow";
+import StreamCreate from "./streams/StreamCreate";
+import StreamEdit from "./streams/StreamEdit";
+import StreamDelete from "./streams/StreamDelete";
+import Header from "./Header";
 
 class App extends React.Component {
   render() {
-    return <div>Streams Client</div>;
+    return (
+      <div className='ui container'>
+        <BrowserRouter>
+          <div>
+            <Header />
+            <Route path='/' exact component={StreamList} />
+            <Route path='/streams/show' exact component={StreamShow} />
+            <Route path='/streams/edit' exact component={StreamEdit} />
+            <Route path='/streams/new' exact component={StreamCreate} />
+            <Route path='/streams/delete' exact component={StreamDelete} />
+          </div>
+        </BrowserRouter>
+      </div>
+    );
   }
 }
 

streams/client/src/components/Header.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+  return (
+    <div className='ui secondary pointing menu'>
+      <Link to='/streams/new' className='item'>
+        Stream
+      </Link>
+      <div className='right menu'>
+        <Link to='/' className='item'>
+          All Streams
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

streams/client/src/components/streams/StreamCreate.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+class StreamCreate extends React.Component {
+  render() {
+    return <div>StreamCreate</div>;
+  }
+}
+
+export default StreamCreate;

streams/client/src/components/streams/StreamDelete.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+class StreamDelete extends React.Component {
+  render() {
+    return <div>StreamDelete</div>;
+  }
+}
+
+export default StreamDelete;

streams/client/src/components/streams/StreamEdit.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+class StreamEdit extends React.Component {
+  render() {
+    return <div>StreamEdit</div>;
+  }
+}
+
+export default StreamEdit;

streams/client/src/components/streams/StreamList.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+class StreamList extends React.Component {
+  render() {
+    return <div>StreamList</div>;
+  }
+}
+
+export default StreamList;

streams/client/src/components/streams/StreamShow.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+class StreamShow extends React.Component {
+  render() {
+    return <div>StreamShow</div>;
+  }
+}
+
+export default StreamShow;