Fix up Room component and add routes to RoomsPane.

src/components/Room.js

@@ -1,28 +0,0 @@
-import React, { PropTypes } from "react";
-import { Link } from "react-router-dom";
-
-import md5 from "md5";
-
-const Room = ({ name, data }) => {
-  const { membership, userCount } = data;
-
-  const classes = ["room"];
-  if (membership == "Member") {
-    classes.push("room-joined");
-  }
-
-  const path = `/app/rooms/${md5(name)}`;
-
-  return (
-    <Link
-      to={path}
-      activeClassName="room-selected"
-      className={classes.join(" ")}
-    >
-      <span className="room-name">{name}</span>
-      <span className="room-user-count">({userCount})</span>
-    </Link>
-  );
-};
-
-export default Room;

src/components/Room.tsx

@@ -0,0 +1,34 @@
+import { FC } from "react";
+import { NavLink } from "react-router-dom";
+
+import { RoomMembership, Room as RoomState } from "../modules/room/slice";
+
+interface Props {
+  name: string;
+  data: RoomState;
+}
+
+const Room: FC<Props> = ({ name, data }) => {
+  const { membership, userCount } = data;
+
+  const classes = ["room"];
+  if (membership === RoomMembership.Joined) {
+    classes.push("room-joined");
+  }
+
+  // TODO: Encode the name.
+  const path = `/rooms/${name}`;
+
+  return (
+    <NavLink
+      to={path}
+      activeClassName="room-selected"
+      className={classes.join(" ")}
+    >
+      <span className="room-name">{name}</span>
+      <span className="room-user-count">({userCount})</span>
+    </NavLink>
+  );
+};
+
+export default Room;

src/containers/RoomsPane.tsx

@@ -1,11 +1,14 @@
 import { FC } from "react";
 import { useSelector } from "react-redux";
+import { useRouteMatch } from "react-router";
+import { Switch, Route } from "react-router-dom";
 
 //import RoomChat from "../components/RoomChat";
 import RoomList from "../components/RoomList";
 import { selectAllRooms } from "../modules/room/slice";
 
 const RoomsPane: FC = () => {
+  const { path, url } = useRouteMatch();
   const rooms = useSelector(selectAllRooms);
 
   let roomChat;
@@ -38,7 +41,14 @@ const RoomsPane: FC = () => {
   return (
     <div id="rooms-pane">
       <RoomList rooms={rooms} />
-      <div id="room-selected-pane">{roomChat}</div>
+      <Switch>
+        <Route exact path={path}>
+          <div id="room-selected-pane">Pick a room.</div>
+        </Route>
+        <Route path={`${path}/:roomId`}>
+          <div id="room-selected-pane">{roomChat}</div>
+        </Route>
+      </Switch>
     </div>
   );
 };