title: React Router redirect after submitting a form using the input value
body: <p><strong>Form.js</strong></p>
  
  <p>What I wish to get out of this form is a link like <strong>'/search/inputValue/'</strong> so from another component I can extract the parameter. What I get instead is just <strong>'/search/'</strong> without the input value.</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  
  class Form extends React.Component {
      state = {
          searched: ''
      }
  
      onSubmit = (e) =&gt; {
          const keyword = e.target.elements.keyword.value;
          this.setState({ searched: keyword });
      }
  
      render(){
          return (
              &lt;form className="form-inline" onSubmit={this.onSubmit}&gt;
                  &lt;div className="form-group"&gt;
                      &lt;input type="text" className="form-control" name="keyword" placeholder="Image keyword" /&gt;
  
                      &lt;Link to={ `/search/${this.state.searched}`}&gt;
                          &lt;button className="btn btn-primary"&gt;Search&lt;/button&gt;
                      &lt;/Link&gt;
                  &lt;/div&gt;
              &lt;/form&gt;       
          );
      }
  };
  
  export default Form;
  </code></pre>
  
  <p>I have noticed that the state updates its value after <strong>a second</strong> submit with the <strong>older input value</strong>, so the problem might be from here.</p>
  
  <p>This can be checked by removing the Link tag, preventDefault and console log the input value. The first one is blank and the second one is with the previous input value.</p>
  
  <p>My whole app is sorted, I just need to figure how to submit to a link from an input.</p>
  
  <p><strong>Router.js</strong></p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  
  import App from '../App';
  import SearchPage from './SearchPage';
  
  const Router = () =&gt; (
      &lt;BrowserRouter&gt;
          &lt;Switch&gt;
              &lt;Route path="/" component={App} exact /&gt;
              &lt;Route path="/search/:keyword" component={SearchPage} /&gt;
          &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
  );
  
  export default Router;
  </code></pre>