title: React router v4 - route with params renders blank page?
body: <p>I'm trying to implement React Router v4 in my create-react-app app and my routes work except for the route with an /:id parameter as it just renders a blank page. I've searched for 2 days and tried implementing the solutions <a href="https://github.com/webpack/webpack-dev-server/issues/333#issuecomment-326834151" rel="nofollow noreferrer">here</a> which says to add <code>&lt;base href="/" /&gt;</code> to the head section of index.html and I've also tried following this <a href="https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf" rel="nofollow noreferrer">Medium guide for simple routing</a> but it still does not work. I don't understand, what is going on?</p>
  
  <p>My code is below, any help is greatly appreciated!</p>
  
  <p>Index.js</p>
  
  <pre><code>ReactDOM.render((
  &lt;BrowserRouter&gt;
      &lt;App /&gt;
  &lt;/BrowserRouter&gt;), 
  document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
          &lt;Routes /&gt;
      )
    }
  }
  </code></pre>
  
  <p>Routes.js</p>
  
  <pre><code>export const Routes = () =&gt; {
      return (
          &lt;main&gt;
              &lt;Switch&gt;
                  &lt;Route exact path="/" component={Home} /&gt;
                  &lt;Route exact path="/movies" component={Search} /&gt;
              &lt;/Switch&gt;
          &lt;/main&gt;
      );
  }
  </code></pre>
  
  <p>Search.js</p>
  
  <pre><code>render() {
          let filteredMovies = this.state.movies.filter((movie) =&gt; {
              return movie.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
          })
  
          return (
              &lt;div&gt;
                  &lt;p&gt;Search Page&lt;/p&gt;
                  &lt;form&gt;
                      &lt;input type="text" value={this.state.search} onChange={this.updateSearch}/&gt;
                  &lt;/form&gt;
                  &lt;div&gt;
                      {filteredMovies.map((movie, idx) =&gt; 
                          &lt;div&gt;
                              &lt;div key={idx}&gt;
                                  &lt;Link to={`/movies/${movie.videoId}`}&gt;
                                      &lt;img src={movie.image.high.url} height="160px" width="100px" alt=""/&gt;
                                      &lt;p&gt;{movie.title}&lt;/p&gt;
                                      &lt;p&gt;{movie.quality}&lt;/p&gt;
                                  &lt;/Link&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      )}
                  &lt;/div&gt;
                  &lt;Switch&gt;
                      &lt;Route path="/movies/:id" component={Single} /&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          )
      }
  
  }
  
  export default Search;
  </code></pre>
  
  <p>Single.js</p>
  
  <pre><code>class Single extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;p&gt;Single Movie...&lt;/p&gt;
                  {this.props.match.params.id}
              &lt;/div&gt;
          )
      }
  } 
  
  export default withRouter(Single);
  </code></pre>
  
  <p>Every route works except for /movies/:id where it just renders a completely blank page. It doesn't even show the <code>&lt;p&gt;Single Movie...&lt;/p&gt;</code>.</p>