title: React Material UI + Router redirect button
body: <p>I am trying to use Material-UI for React but I am not sure about the proper way to redirect to other pages / components.</p>
  
  <p>I have read several sites about the different ways to redirect using <code>react-router-dom</code>, but still, I don't get the "final" way.</p>
  
  <h1><code>history.push</code>:</h1>
  
  <p>One of the ways that didn't work for me was using <code>props.history.push('/some-route')</code>. I get that <code>history</code> is undefined. I also tried accesing it through <code>props.history</code>:</p>
  
  <pre><code>import React, { Fragment } from 'react';
  import { Button } from '@material-ui/core';
  
  const Page = props =&gt; {
      const { history } = props;
  
      return (
          &lt;Fragment&gt;
              &lt;Button
                  variant="contained"
                  color="primary"
                  size="large"
                  onClick={() =&gt; history.push('/some-route')}
              &gt;My Button&lt;/Button&gt;
          &lt;/Fragment&gt;
      );
  };
  
  export default Page;
  </code></pre>
  
  <h1>Redirect Component</h1>
  
  <p>Another way that didn't work for me was using the same <code>react-router-dom</code> Redirect component. Here I don't get any error, it just does nothing when clicking:</p>
  
  <pre><code>import React, { Fragment } from 'react';
  import { Button } from '@material-ui/core';
  import { Redirect } from 'react-router-dom';
  
  const Page = props =&gt; {
      const { history } = props;
  
      return (
          &lt;Fragment&gt;
              &lt;Button
                  variant="contained"
                  color="primary"
                  size="large"
                  onClick={() =&gt; &lt;Redirect to={'/some-route'} /&gt;}
              &gt;My Button&lt;/Button&gt;
          &lt;/Fragment&gt;
      );
  };
  
  export default Page;
  </code></pre>
  
  <h1>Links with styles</h1>
  
  <p>I have found the only way that is still working with <code>react-router-dom</code> Link Components where I pasted the same generated classes names:</p>
  
  <pre><code>import React, { Fragment } from 'react';
  import { Link } from 'react-router-dom';
  
  const Page = props =&gt; {
      return (
          &lt;Fragment&gt;
              &lt;Link
                  class="MuiButtonBase-root-124 MuiButton-root-98 MuiButton-contained-109 MuiButton-containedPrimary-110 MuiButton-raised-112 MuiButton-raisedPrimary-113 MuiButton-sizeLarge-122"
                  to="/some-route"
              &gt;My Button&lt;/Button&gt;
          &lt;/Link&gt;
      );
  };
  
  export default Page;
  </code></pre>
  
  <p>And the last one that I didn't even try since I guess it's wrong is inserting a Button component inside a Link component (or viceversa).</p>
  
  <p>Which way do you recommend to redirect when clicking a button? Any comments are appreciated.</p>