ReactJS помогите настроить маршрутизацию

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Admin from './Admin';
import { Switch, Route } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';

ReactDOM.render((
  <Switch>
    <Route exact path='/' component={App}/>
    <Route exact path='/admin' component={Admin}/>
  </Switch>
), document.getElementById('root'))

serviceWorker.unregister();

App.js

import React from 'react';
import './App.css';
import PropTypes from 'prop-types';

let news = require('./data.json');

class Article extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false
    };
    this.updateVisible = this.updateVisible.bind(this);
  }
  updateVisible() {
    this.setState({ visible: true });
  }
  render() {
    let author = this.props.data.author;
    let text = this.props.data.text;
    let bigtext = this.props.data.bigtext;
    let visible = this.state.visible;
    return (
      <div className="article">
        <p className="card__author">{author}</p>
        <p className="card__text">{text}</p>
        <a href="#" className={"card__readmore " + (visible ? 'none' : '')} onClick={this.updateVisible}>Подробнее</a>
        <p className={"card__big-text " + (visible ? '' : 'none')}>{bigtext}</p>
      </div>
    )
  }
}

class News extends React.Component {
  render() {
    let data = this.props.data;
    let template;

    if (data.length > 0) {
      template = data.map(function (item, index) {
        return (
          <div key={index} className="card">
            <Article data={item} />
          </div>
        );
      })
    } else {
      template = <p>Новостей нет :(</p>
    }

    return (
      <div className="cards">
        {template}
        <p className={data.length > 0 ? '' : 'none'}>Количество новостей: {data.length}</p>
      </div>
    );
  }
}

News.propTypes = {
  data: PropTypes.array.isRequired
}
Article.propTypes = {
  data: PropTypes.shape({
    author: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    bigtext: PropTypes.string.isRequired
  })
}

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <h1 className="title">Новости</h1>
        <News data={news} />
      </div>
    );
  }
}

export default App;

Admin.js

import React from 'react';

class Admin extends React.Component {
  render() {
    return (
      <div className="container">
        <h1 className="title">тест</h1>
      </div>
    );
  }
}

Не работает :(