Our third Route

As discussed at the beginning of this chapter, the Chatastrophe team is set on having a user profile view. Let's do the skeleton and basic routing for that.

In src/components, make a new file called UserContainer.js. Inside, do the basic component skeleton:

import React, { Component } from 'react';
import Header from './Header';

export default class UserContainer extends Component {
  render() {
    return (
      <div id="UserContainer">
        <Header />
        <h1>Hello from UserContainer</h1>
      </div>
    );
  }
}

Back in App.js, let’s import our new container and add the Route component:

import UserContainer from './UserContainer';

// Inside render, underneath ChatContainer Route
<Route path="/users" component={UserContainer} />

Hold on! The preceding code creates a route at /users for our UserContainer, but we don't have just one user view. We have a user view for every user of our application. We need to have a route for User...