title: react router not matching to route
body: <p>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.</p>
  
  <p>My index.js is as like below:</p>
  
  <pre><code>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 = () =&gt; (
    &lt;h1&gt;404.. This page is not found!&lt;/h1&gt;)
  
  ReactDOM.render(
      (&lt;Router history={hashHistory}&gt;
          &lt;App&gt;
              &lt;Route exact path="/" component={App}&gt;
                &lt;Route path="/quiz" component={QuizInfo} &gt;
                &lt;/Route&gt;
                &lt;Route path="/quiz/:id" component={QuizQuestions}&gt;
                &lt;/Route&gt;
                &lt;Route path='*' component={NotFound} /&gt;
              &lt;/Route&gt;
          &lt;/App&gt;
    &lt;/Router&gt;),
    document.getElementById('root')
  );
  </code></pre>
  
  <p>My app.js is like below where I am rendering  element in map function.</p>
  
  <pre><code>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 =&gt; {
          const quiz_list = res.data.quizList;
          console.log(res);
          this.setState({ quiz_list });
        });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;Welcome to Quiz App&lt;/h2&gt;
          &lt;/div&gt;
          &lt;h4&gt; Choose any quiz to attemp&lt;/h4&gt;
          &lt;div className="quiz-list"&gt;
              {this.state.quiz_list.map((quiz, index) =&gt;
                &lt;li key={index}&gt;
                  &lt;Link to={`/quiz/${quiz.id}`}&gt;{quiz.name}&lt;/Link&gt;
                &lt;/li&gt;
              )}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default App;
  </code></pre>