title: React Router Link is not working
body: <p>React router Link doesn't seem to work for my app. It seems I am missing like basic doesn't work. My Link component updates the URL to be /products/singleproduct but my page just breaks....
  Could anyone please tell me how to solve this issue?</p>
  
  <p><strong>App.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import Header from './Header';
  import Body from './Body';
  import Main from './Main';
  require('../../scss/style.scss');
  
  const App = () =&gt; (
      &lt;div&gt;
       &lt;Header /&gt;
       &lt;Main /&gt;
      &lt;/div&gt;
  );
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Main.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { Component } from 'react';
  import { Switch, Route } from 'react-router-dom';
  import ServicePage from './ServicePage';
  import ProductPage from './ProductPage';
  import SingleProductPage from './SingleProductPage';
  import Body from './Body';
  
  export default class Main extends Component {
    render() {
      return (
        &lt;main&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" component={Body} /&gt;
            &lt;Route path='/services' component={ServicePage} /&gt;
            &lt;Route path='/products' component={ProductPage}&gt;
              &lt;Route path="/products/singleproduct" component={SingleProductPage} /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/main&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>ProductPage.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { Component } from 'react';
  import { Link } from 'react-router';
  import { withStyles } from 'material-ui/styles';
  import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
  import Button from 'material-ui/Button';
  import Typography from 'material-ui/Typography';
  require('../../scss/style.scss');
  
  export default class ProductPage extends Component {
  
    render() {
      return (
        &lt;div className="product-page"&gt;
          &lt;h1&gt;Products&lt;/h1&gt;
          &lt;div className="section-header-line"&gt;&lt;/div&gt;
          &lt;Link to="/products/singleProduct"&gt;
            Single Product
          &lt;/Link&gt;
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>