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...