Inside our App component, we currently render LoginContainer, no matter what:
render() {
return (
<div id="container">
<LoginContainer />
</div>
);
}We want to change this logic so that we render either LoginContainer only or we render ChatContainer. To do that, let's require it in our ChatContainer.
We'll also require our Route component from react-router-dom:
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import LoginContainer from './LoginContainer';
import ChatContainer from './ChatContainer';
import './app.css';Note
I put the Route import above the two Container imports. Best practices say you should put absolute imports (imports from node_modules) before relative imports (files imported from within src). This keeps things clean.
Now, we can replace our containers with Route components that take a component prop:
render() {
return (
<div id="container">
<Route component={LoginContainer...