title: Getting URL Parameters on GatsbyJS
body: <p>Is there a way to retrieve url parameters passed on pages of project built on GatsbyJS?
  I'm trying to implement a password reset function on my page using AWS, but they can only send the parameters through a link sent to the user's email.</p>
  
  <p>So the flow would be like this :</p>
  
  <p>User triggers Forgot Password -> AWS sends email to user with link -> Link directs to my page with the parameters -> Reset password form automatically populates fields with the parameters passed</p>
  
  <p><strong>Update</strong></p>
  
  <p>Here's my App.js code :</p>
  
  <pre><code>import { Router } from "@reach/router"
  
  
  const App = () =&gt; (
    &lt;Layout&gt;
      &lt;Router&gt;
        &lt;Login path="signin" exact component={Login} /&gt;
        &lt;Resources path="api/resources" exact component={Resources} /&gt;
        &lt;Verify path="verify" exact component={Verify} /&gt;
        &lt;Forgot path="forgot" exact component={Forgot} /&gt;
        &lt;Reset path="account/reset/:code" exact component={Reset}/&gt;
      &lt;/Router&gt;
    &lt;/Layout&gt;
  )
  
  export default App;
  </code></pre>
  
  <p>Reset.js :</p>
  
  <pre><code>export default class ResetForm extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              password: "",
              confirmPassword: "",
              vercode: "",
              email: "",
              emailValid: false,
              passValid: false,
              confirmValid: false,
              codeValid: false,
              formValid: true,
              formErrors : {
                  email: false,
                  password: false,
                  confirmPassword: false,
                  vercode: false,
              },
              respErrors : {
                  email: {
                      isValid : true,
                      message : ""
                  },
                  password: {
                      isValid : true,
                      message : ""
                  },
                  code : {
                      isValid : true,
                      message : ""
                  }
              }
  
          };
  
      }
  
      validateField(field, value) {
  
          let password = this.state.password
          let fieldValidationErrors = this.state.formErrors;
          let emailValid = this.state.emailValid
          let passValid = this.state.passValid
          let confirmValid = this.state.confirmValid
          let codeValid = this.state.vercode
          let fieldValidationMessages = this.state.respErrors;
  
  
          switch(field){
              case 'email' :
                  emailValid = validator.isEmail(value);
                  fieldValidationErrors.email = emailValid ? false : true;
                  fieldValidationMessages.email.isValid = true;
                  fieldValidationMessages.email.message = "Invalid E-Mail Address";
                  break;
  
              case 'password' :
                  passValid = validator.matches(value, RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&amp;*])(?=.{8,})'));
  
                  fieldValidationMessages.password.message = passValid ? '' : undefined;
  
                  if(!validator.matches(value,RegExp('^(?=.*[a-z])(?=.*[A-Z])'))){
                      fieldValidationMessages.password.message = "At least 1 Upper case character is required";
                  }
  
                  if(!validator.matches(value,RegExp('^(?=.*[!@#$%^&amp;*])'))){
                      fieldValidationMessages.password.message = "At least 1 Symbol is required";
                  }
  
                  if(!validator.matches(value,RegExp('^(?=.{8,})'))){
                      fieldValidationMessages.password.message = "Password must have at least 8 characters";
                  }
  
  
                  fieldValidationErrors.password = passValid ? false : true;
                  break;
  
              case 'confirmPassword' :
                  confirmValid = validator.equals(value, password);
                  fieldValidationErrors.confirmPassword = confirmValid ? false : true;
                  break;
  
              case 'vercode' :
                  codeValid = !validator.isEmpty(value);
                  fieldValidationErrors.vercode = codeValid ? false : true;
                  break;
  
              default :
  
                  break
              }
  
          this.setState({
              formErrors: fieldValidationErrors,
              emailValid: emailValid,
              passValid: passValid,
              confirmValid: confirmValid,
              codeValid: codeValid,
          }, this.validateForm())
  
      }
  
      validateForm(){
          this.setState({
              formValid: 
                  this.state.emailValid &amp;&amp; this.state.confirmValid &amp;&amp; this.state.codeValid &amp;&amp; this.state.passValid
          })
  
      }
  
      handleChange = event =&gt; {
          const name = event.target.id;
          const value = event.target.value;
          this.setState({
              [name]: value
          },
              () =&gt; {
                  this.validateField(name, value)
              }
          );
      }
  
  
      handleSubmit = async (event) =&gt; {
          event.preventDefault()
          const state = this.state
  
          await handleReset(state)
          .then(async (data) =&gt; {
              if(data.isValid){
                  await handleLogin(state)
                  .then(() =&gt; {
                      navigate('/')
                  })
                  .catch(err =&gt; console.log(err))
              } else {
                  switch (data.code) {
                      case CODE_RESET.RESET_EXPIRED:
                          data.message = "The verification code you have submitted is already expired."
                          break
                      case CODE_RESET.RESET_MISMATCH:
                          data.message = "The verification code you have submitted is invalid."
                          break
  
                      default:
                          data.message = "Something went wrong."
                          break;
                  }
  
                  this.setState({
                      [state.respErrors.code.isValid] : data.isValid,
                      [state.respErrors.code.message] : data.message
                  })
              }
          })
          .catch(async(err) =&gt; {
              console.log(err)
          })
  
      }
  
    render() {
          if(isLoggedIn()) {
              navigate(`/`)
          }
  
          return (
  
              &lt;Row className={[formStyles.formContainer, "row"].join(' ')} &gt;
              &lt;Col sm={{
                  size:12
                  }}
                  md={{
                      size: 8,
                      offset: 2
                  }}
              &gt;
                  &lt;Form 
                      onSubmit={this.handleSubmit} 
                  &gt;
                      &lt;h3 style={{
                          fontWeight: 'bolder'
                      }}&gt;
                          Reset Password
                      &lt;/h3&gt;
                      &lt;FormGroup&gt;
                          &lt;Label for="email"&gt;Email&lt;/Label&gt;
                          &lt;Input
                              id="email"
                              autoFocus
                              type="email"
                              name="email"
                              value={this.state.email.value}
                              onChange={this.handleChange}
                              className={formStyles.signUp} 
                              valid={this.state.emailValid}
                              invalid={(this.state.formErrors.email || !this.state.respErrors.email.isValid ) ? true : undefined}
                          /&gt;
                          &lt;FormFeedback invalid={this.state.respErrors.email.isValid ? '' : undefined}&gt;
                              {this.state.respErrors.email.message}
                          &lt;/FormFeedback&gt;
                      &lt;/FormGroup&gt;
  
                      &lt;FormGroup&gt;
                          &lt;Label for="password"&gt;New Password&lt;/Label&gt;
                          &lt;Input
                              id="password"
                              type="password"
                              name="password"
                              value={this.state.password.value}
                              onChange={this.handleChange}
                              className={formStyles.signUp} 
                              valid={this.state.passValid }
                              invalid={this.state.formErrors.password ? true : undefined}
                          /&gt;
                          &lt;FormText invalid={this.state.respErrors.password.isValid ? '' : undefined}&gt;
                              {this.state.respErrors.password.message}
  
                          &lt;/FormText&gt;
                      &lt;/FormGroup&gt;
                      &lt;FormGroup&gt;
                          &lt;Label for="confirmPassword"&gt;Confirm Password&lt;/Label&gt;
                          &lt;Input
                              id="confirmPassword"
                              type="password"
                              name="confirmPassword"
                              value={this.state.confirmPassword.value}
                              onChange={this.handleChange}
                              className={formStyles.signUp}
                              valid={this.state.confirmValid }
                              invalid={this.state.formErrors.confirmPassword ? true : undefined}
                          /&gt;
                          &lt;FormFeedback
                              invalid={this.state.formErrors.confirmPassword ? '' : undefined}
                          &gt;
                              Password does not match    
                          &lt;/FormFeedback&gt;
  
                      &lt;/FormGroup&gt;
  
                      &lt;FormGroup&gt;
                          &lt;Label for="vercode"&gt;Verification Code&lt;/Label&gt;
                          &lt;Input
                              id="vercode"
                              type="text"
                              name="vercode"
                              maxLength={6}
                              value={this.state.vercode.value}
                              onChange={this.handleChange}
                              className={formStyles.signUp} 
                              valid={this.state.codeValid.value }
                              invalid={this.state.formErrors.vercode || !this.state.respErrors.code.isValid ? true : undefined}
                          /&gt;
                          &lt;FormFeedback invalid={this.state.respErrors.code.isValid ? '' : undefined} &gt;
                              {this.state.respErrors.code.message}
                          &lt;/FormFeedback&gt;
                      &lt;/FormGroup&gt;
  
                      &lt;Button 
                          color="primary"
                          disabled={!this.state.formValid}
                      &gt;
                          Submit
                      &lt;/Button&gt;
                  &lt;/Form&gt;
              &lt;/Col&gt;
        &lt;/Row&gt;
      )
    }
  }
  </code></pre>