title: How can I get the params from the url with React?
body: <p>I am trying to setup verify account with react and have the following in my <code>App.js</code> file</p>
  <blockquote>
  <p>App.js</p>
  </blockquote>
  <pre><code>import SigninPage from './pages/signin';
  import ResetPasswordPage from './pages/resetPassword'
  import VerifyAccountPage from './pages/verifyAccount'
  ...
  ...
  import { useHistory } from 'react-router';
  import { logout } from './utils/auth';
  
  function App() {
  
    const history = useHistory();
    
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route path='/' component={Home} exact /&gt;
          &lt;Route
              path=&quot;/signout&quot;
              render={() =&gt; {
                logout();
                history.push('/');
                return null;
              }}
          /&gt;
          &lt;Route path='/signin' component={SigninPage} exact /&gt;
          &lt;Route path='/reset-password?reset-password-token=:resetPasswordToken' component={ResetPasswordPage} /&gt;
          &lt;Route path='/verify-account?token=:token&amp;email=:email' component={VerifyAccountPage} exact /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>and in my VerifyAccountPage component have the following</p>
  <pre><code>import { Redirect } from 'react-router-dom';
  import { useHistory } from 'react-router';
  import { verifyAccount, isAuthenticated } from '../../utils/auth';
  
  
  const VerifyAccount = () =&gt; {
  
    const { token, email } = this.props.match.params
    const history = useHistory();
    const [error, setError] = useState('');
  
    const handleGet = async (e) =&gt; {
      e.preventDefault();
      setError('');
      try {
        const data = await verifyAccount(token, email);
  
        if (data) {
          history.push('/');
        }
        console.log(data);
      } catch (err) {
        if (err instanceof Error) {
          // handle errors thrown from frontend
          setError(err.message);
        } else {
          // handle errors thrown from backend
          setError(err);
        }
      }
    };
  
    return isAuthenticated() ? (
      &lt;Redirect to=&quot;/#&quot; /&gt;
      ) : (  
      &lt;&gt;
        &lt;Container&gt;
          &lt;FormWrap&gt;
            &lt;Icon to='/'&gt;mywebsite&lt;/Icon&gt;
            &lt;FormContent&gt;
              &lt;Form action='#'&gt;
                &lt;FormH1&gt;Verify Account&lt;/FormH1&gt;
                &lt;Text&gt;Account has been verified!&lt;/Text&gt;
              &lt;/Form&gt;
            &lt;/FormContent&gt;
          &lt;/FormWrap&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  };
  
  export default VerifyAccount;
  </code></pre>
  <p>and here is <code>verifyAccount.js</code> page</p>
  <pre><code>import React from 'react';
  import VerifyAccount from '../components/VerifyAccount';
  import ScrollToTop from '../components/ScrollToTop';
  
  function VerifyAccountPage() {
    return (
      &lt;&gt;
        &lt;ScrollToTop /&gt;
        &lt;VerifyAccount /&gt;
      &lt;/&gt;
    );
  }
  
  export default VerifyAccountPage;
  </code></pre>
  <p>here is</p>
  <blockquote>
  <p>index.js</p>
  </blockquote>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>but this is not working and when I go to the link <code>https://mywebsite.com/verify-account?token=3heubek&amp;email=user1@email.com</code> nothing happens other than a 200 or 304 status code</p>
  <p>no request is sent to the API so means that the params are not getting pulled out</p>
  <p>can anyone point me to what is going on?</p>
  <p>package versions used from package.json file</p>
  <pre><code>  &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-icons&quot;: &quot;^3.11.0&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;3.4.3&quot;,
      &quot;react-scroll&quot;: &quot;^1.8.1&quot;,
      &quot;styled-components&quot;: &quot;^5.2.0&quot;,
      &quot;@types/node&quot;: &quot;^15.6.0&quot;,
      &quot;jwt-decode&quot;: &quot;^3.0.0&quot;
  </code></pre>