Routes with parameters

chapter08/src/App.routing.js

@@ -14,19 +14,31 @@ class App extends Component<{}> {
                 <BrowserRouter>
                     <Switch>
                         <Route path="/login" component={ConnectedLogin} />
+                        <Route
+                            path="/about/:something"
+                            render={props => (
+                                <div>
+                                    About... {props.match.params.something}
+                                </div>
+                            )}
+                        />
+                        <Route
+                            path="/help"
+                            render={() => <div>Help!</div>}
+                        />
                         <ConnectedProtectedRoutes>
                             <Route
-                                path="/"
                                 exact
+                                path="/"
                                 render={() => <div>HOME SWEET HOME</div>}
                             />
                             <Route
-                                path="/AAA"
+                                path="/alpha"
-                                render={() => <div>AAA</div>}
+                                render={() => <div>Alpha page</div>}
                             />
                             <Route
-                                path="/BBB"
+                                path="/zulu"
-                                render={() => <div>BBB</div>}
+                                render={() => <div>Zulu page</div>}
                             />
                         </ConnectedProtectedRoutes>
                         <Route render={() => <div>404 ERROR!</div>} />

chapter08/src/routingApp/login.actions.js

@@ -21,7 +21,10 @@ export const loginFailure = () => ({
 
 // Complex actions:
 
-export const attemptLogin = (user, password) => async dispatch => {
+export const attemptLogin = (
+    user: string,
+    password: string
+) => async dispatch => {
     try {
         dispatch(loginRequest());
         // the next line delays execution for 5 seconds:

chapter08/src/routingApp/login.connected.js

@@ -11,6 +11,7 @@ export const ConnectedLogin = connect(
         token: state.token
     }),
     dispatch => ({
-        onLogin: (user, password) => dispatch(attemptLogin(user, password))
+        onLogin: (user: string, password: string) =>
+            dispatch(attemptLogin(user, password))
     })
 )(Login);

chapter08/src/routingApp/protectedRoutes.component.js

@@ -12,7 +12,7 @@ export class ProtectedRoutes extends React.Component<{
     static propTypes = {
         token: PropTypes.string.isRequired,
         children: PropTypes.arrayOf(PropTypes.object).isRequired,
-        location: PropTypes.object
+        location: PropTypes.object.isRequired
     };
 
     render() {