How to do it...

In this recipe, we are going to display some components based on the routes:

  1. We need to create four functional components (About, Contact, Home, and Error 404) and name them as index.jsx in their directories.
  2. Create the Home component:
import React from 'react';const Home = () => (  <div className="Home">    <h1>Home</h1>  </div>);export default Home;
File: src/components/Home/index.jsx
  1. Create the About component:
import React from 'react'; const About = () => (  <div className="About">    <h1>About</h1>  </div>); export default About;
File: src/components/About/index.jsx
  1. Create the Contact component:
      import React from 'react';      const Contact = () => (        <div className="Contact">          <h1>Contact</h1>        </div>      );      export default Contact; ...

Get React Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.