Как использовать React-Router в Reactjs

Я новичок в Reactjs, и я хочу использовать маршрутизатор, но не работаю, отображая пустую страницу.

Как я могу использовать домашнюю категорию и продукты маршрутизатора. Я помещаю код в App.jsx и index.jsx, но показываю пустую страницу, как я могу решить эту проблему.

Ниже приведен мой код App.jsx.

/* Import statements */
import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';

/* Home component */
const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

/* Category component */
const Category = () => (
  <div>
    <h2>Category</h2>
  </div>
)

/* Products component */
const Products = () => (
  <div>
    <h2>Products</h2>
  </div>
)

/* App component */
class App extends React.Component {
  render() {
    return (
      <div>
        <nav className = "navbar navbar-light">
          <ul className = "nav navbar-nav">

           /* Link components are used for linking to other views */
            <li><Link to = "/">Homes</Link></li>
            <li><Link to = "/category">Category</Link></li>
            <li><Link to = "/products">Products</Link></li>

          </ul>
         </nav>

          /* Route components are rendered if the path prop matches the current URL */
           <Route path = "/" component = {Home}/>
           <Route path = "/category" component = {Category}/>
           <Route path = "/products" component = {Products}/>

      </div>
    )
  }
}

Вот мой код index.jsx

import React from 'react';
import { render } from 'react-dom';

import { App } from './components/App';
import './style.less';

render(<App />, document.getElementById('container'));