title: Why does my url spits out the two // at the end?
body: <p>I am very new to React so bear with me here. I have this button here:</p>
  <pre><code>let showButton
  if (schema.type === 'belongs_to') {
    showButton = (
      &lt;Link to={['collections', 'locks', this.props.collectionName]}&gt;
        &lt;button&gt;Visa&lt;/button&gt;
      &lt;/Link&gt;
    )
  }
  </code></pre>
  <p>This button will redirect to this URL: <code>http://localhost:3000/#/collections/locks/</code> and there is nothing wrong with that, but when I'm adding this: <code>this.props.id</code> which is a legit prop, but the url I get is this: <code>http://localhost:3000/#/collections/locks//</code>. Notice the two <strong>//</strong> at the end.</p>
  <h3>My Question</h3>
  <p>Why does my url spits out the two <strong>//</strong> at the end? Is it because <code>this.props.id</code> is empty? As I said, I am very new to this. Thankful for all the support!</p>
  <h3>Code:</h3>
  <p>I just want to say that I'm maintaining this project, so all of the code is not written by me, therefor I might not know <strong>every</strong> little line.</p>
  <p>However.. The <code>this.props.id</code> if from here:</p>
  <pre><code>class DeleteDocument extends Component {
    constructor(props) {
      super(props)
      this.state = { confirmed: false }
    }
    render() {
      return (
        &lt;div className=&quot;DeleteDocument&quot;&gt;
          &lt;div className=&quot;box&quot;&gt;
            &lt;div className=&quot;title&quot;&gt;
              Är du säker på att du vill ta bort dokumentet?
            &lt;/div&gt;
            &lt;label&gt;
              &lt;input
                type=&quot;checkbox&quot;
                value={this.state.confirmed}
                onChange={e =&gt;
                  this.setState({ confirmed: !this.state.confirmed })}
              /&gt;
              Ja, jag är säker
            &lt;/label&gt;
            &lt;div className=&quot;box&quot; /&gt;
          &lt;/div&gt;
          &lt;div style={{ marginTop: '20px' }}&gt;
            &lt;button
              disabled={!this.state.confirmed}
              onClick={this.props.deleteDocument}
            &gt;
              Ta bort
            &lt;/button&gt;
            &lt;div style={{ padding: '15px', borderBottom: '1px solid #ccc' }}&gt;
              &lt;Link to={'/collections/locks/${this.props.id}'}&gt; HERE IT IS
                &lt;button&gt;Avbryt&lt;/button&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  <p>So I made a decision to use the same props because it's working here and the naming of it seemed to suit my use for it (don't know if this makes sense).</p>