react router not matching to route

I am trying to render react component based on query string. Query string changing in browser address bar like quiz/1, quiz/2 but related component is not being render instead it is reloading page each time.

My index.js is as like below:

import ReactDOM from 'react-dom';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link, IndexRoute, hashHistory } from 'react-router-dom'
import App from './App';
import QuizInfo from './QuizInfo';
import QuizQuestions from './QuizQuestions';
import './index.css';

const NotFound = () => (
  <h1>404.. This page is not found!</h1>)

ReactDOM.render(
    (<Router history={hashHistory}>
        <App>
            <Route exact path="/" component={App}>
              <Route path="/quiz" component={QuizInfo} >
              </Route>
              <Route path="/quiz/:id" component={QuizQuestions}>
              </Route>
              <Route path='*' component={NotFound} />
            </Route>
        </App>
  </Router>),
  document.getElementById('root')
);

My app.js is like below where I am rendering element in map function.

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import axios from 'axios';
import logo from './logo.svg';
import BaseData from './baseData';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      quiz_list: [],
      quiz_questions: [],
    };
    this.baseUrl = "http://localhost:8000/quiz/";
  };
  componentDidMount() {
    var url = this.baseUrl+"quiz-list";
    axios.get(url)
      .then(res => {
        const quiz_list = res.data.quizList;
        console.log(res);
        this.setState({ quiz_list });
      });
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Quiz App</h2>
        </div>
        <h4> Choose any quiz to attemp</h4>
        <div className="quiz-list">
            {this.state.quiz_list.map((quiz, index) =>
              <li key={index}>
                <Link to={`/quiz/${quiz.id}`}>{quiz.name}</Link>
              </li>
            )}
        </div>
      </div>
    );
  }
}


export default App;