Let's create some sections to test some basic routes. We need to create four stateless components (About, Contact, Home, and Error404) and name them as index.jsx in their directories.

You can add the following to the src/components/Home.jsx component:

  import React from 'react';

  const Home = () => ( 
    <div className="Home">
      <h1>Home</h1>
    </div>
  );

  export default Home;

The src/components/About.jsx component can be created with the following:

  import React from 'react';

  const About = () => ( 
    <div className="About">
      <h1>About</h1>
    </div>
  );

  export default About;

The following creates the src/components/Contact.jsx component:

  import React from 'react';

  const Contact = () => ( 
    <div className="Contact">
      <h1>Contact</h1>
    </div>
  );

  export default Contact;

Finally, the src/components/Error404/index.jsx component is created as follows:

  import React from 'react';

  const Error404 = () => ( 
    <div className="Error404">
      <h1>Error404</h1>
    </div>
  );

  export default Error404;

After we have created all the stateless components, we need to modify our index.js file to import our route file, which we will create in the next step:

  // Dependencies
  import React from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter as Router } from 'react-router-dom'; 

  // Styles
  import './index.css';

  // Routes
  import AppRoutes from './routes';

  render( 
    <Router>
      <AppRoutes />
    </Router>, 
    document.getElementById('root')
  );

Now, we need to create the route file, where we will render our Home component when the user accesses to the root path (/):

  // Dependencies
  import React from 'react';
  import { Route } from 'react-router-dom';

  // Components
  import App from './components/App'; 
  import Home from './components/Home';

  const AppRoutes = () => ( 
    <App>
      <Route path="/" component={Home} /> 
    </App>
  );

  export default AppRoutes;

After that, we need to modify our App.jsx file to render the route components as children:

  import React from 'react';
  import { element } from 'prop-types';
  import './App.css';

  const App = ({ children }) => ( 
    <div className="App">
      {children}
    </div> 
  );

  App.propTypes = { 
    children: element
  };

  export default App;

If you run the application, you will see the Home component in the root (/):

Now, let's add Error404 when the user tries to access any other route:

  // Dependencies
  import React from 'react';
  import { Route } from 'react-router-dom';

  // Components
  import App from './components/App';
  import Home from './components/Home';
  import Error404 from './components/Error404';

  const AppRoutes = () => (
    <App>
      <Route path="/" component={Home} />
      <Route component={Error404} />
    </App>
  );

  export default AppRoutes;

Let's run the application again. You will see that both the Home and Error404 components are being rendered:

You are probably wondering why this is happening. It's because we need to use the <Switch> component to execute just one component if it matches the path. For this, we need to import the Switch component and add it as a wrapper for our routes:

  // Dependencies
  import React from 'react';
  import { Route, Switch } from 'react-router-dom';

  // Components
  import App from './components/App';
  import Home from './components/Home';
  import Error404 from './components/Error404';

  const AppRoutes = () => (
    <App>
      <Switch>
        <Route path="/" component={Home} />
        <Route component={Error404} />
      </Switch>
    </App>
  );

  export default AppRoutes;

Now, if you got to the root (/), you will see the Home component and Error404 won't be executed at the same time (it will just be executed in the Home component), but if we go to /somefakeurl, we will see that the Home component is executed as well, and this is a problem:

To fix the problem, we need to add the exact prop in the route that we want to match. The problem is that /somefakeurl will match our root path (/), but if we want to be very specific about the paths, we need to add the exact prop to our Home route:

  const AppRoutes = () => (
    <App>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route component={Error404} />
      </Switch>
    </App>
  );

Now, if you go to /somefakeurl one more time, you will be able to see the Error404 component:

Now, we can add our other components (About and Contact):

  // Dependencies
  import React from 'react';
  import { Route, Switch } from 'react-router-dom';

  // Components
  import App from './components/App';
  import About from './components/About';
  import Contact from './components/Contact';
  import Home from './components/Home';
  import Error404 from './components/Error404';

  const AppRoutes = () => (
    <App>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} exact />
        <Route path="/contact" component={Contact} exact />
        <Route component={Error404} />
      </Switch>
    </App>
  );

  export default AppRoutes;

Now, you can visit /about:

Alternatively, you can now visit /contact: