title: React- React-Router is not navigating to edit path and is pre-pending link path to current path
body: <p>I have a fairly simple navigation setup. I am running into an issue where if I am on the /ingredients when I click on the edit link, the router is navigating me to /ingredients/edit/Ingredients/:id instead of ingredients/edit/:id (note :id is just some random guid).</p>
  <pre><code>&lt;BrowserRouter&gt;
        &lt;MenuBar /&gt;
        {isLoading &amp;&amp; (
          &lt;div className={&quot;spinnerContainer&quot;}&gt;
            &lt;CircularProgress className={&quot;spinner&quot;} /&gt;
          &lt;/div&gt;
        )}
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/ingredients/edit/:id&quot; component={IngredientEdit} /&gt;
          &lt;Route exact path=&quot;/ingredients/:id&quot; component={IngredientDetail} /&gt;
          &lt;Route exact path=&quot;/ingredients/&quot; component={IngredientsList} /&gt;
          &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
  </code></pre>
  <p>Below are the links in my list component:</p>
  <pre><code>                 &lt;Link
                      onClick={() =&gt; {
                        dispatch(ingredientIdSelected(x.id));
                        history.push(`/ingredients/edit/${x.id}`);
                      }}
                    &gt;
                        &lt;Edit /&gt;
                    &lt;/Link&gt;         
                    &lt;Link
                      onClick={() =&gt; {
                        dispatch(ingredientIdSelected(x.id));
                        history.push(`/${x.id}`);
                      }}
                    &gt;                       
                        &lt;Info /&gt;
                    &lt;/Link&gt;
  </code></pre>
  <p>On click I dispatch an action and use history.push to navigate user to the relevant component. I am using the <strong>useHistory()</strong> hook instead of using a HOC (i.e. wrapping my components in <strong>withRouter</strong>).</p>
  <p>When I am on the /ingredients route, if I click on the detail link (i.e. <strong>history.push(<code>/${x.id}</code>)</strong>) I am correctly navigated to /ingredients/:id.</p>
  <p>When I click on the edit link, I am being navigated to /ingredients/edit/ingredients/:id. I also tried changing my history.push to <strong>/edit/:id</strong> and that navigates to edit/Ingredients/:id.</p>
  <p>For whatever reason, the current path is being stored and checked against. How do I set it up so it routes correctly?</p>
  <hr />
  <p>The MenuBar component is a static menu bar that just routes to the root component (i.e. IngredientsList).</p>
  <p>Below is the component the links are located in (the IngredientList component)</p>
  <pre><code>return (
    &lt;&gt;
        {ingredients.map((x, index) =&gt; {
          return (
                &lt;Card className={classes.root} variant=&quot;outlined&quot;&gt;
                   {some content here}
                &lt;CardActions&gt;
                      &lt;Link
                onClick={() =&gt; {
                  dispatch(ingredientIdSelected(x.id));
                  history.push(`/ingredients/edit/${x.id}`);
                }}
              &gt;
                &lt;Edit /&gt;
              &lt;/Link&gt;         
              &lt;Link
                onClick={() =&gt; {
                  dispatch(ingredientIdSelected(x.id));
                  history.push(`/${x.id}`);
                }}
              &gt;                       
                &lt;Info /&gt;
              &lt;/Link&gt;
                    &lt;/CardActions&gt;
              &lt;/Card&gt;
          )})}
    &lt;/&gt;
  );
  </code></pre>