---

How To Use Relative Links With React Router

In this tutorial, I’ll show you how to create a relative link with React Router. We will be writing the component EditButton which renders a button that appends /edit to the path the user is on. This will allow us to reuse the component all over our React project.

<span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> React </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;react&quot;</span><span style="color: var(--shiki-color-text)">;</span></span>
<span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { Link } </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;react-router-dom&quot;</span><span style="color: var(--shiki-color-text)">;</span></span>
<span></span>
<span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">EditButton</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> () </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> (</span></span>
<span><span style="color: var(--shiki-color-text)">  &lt;</span><span style="color: var(--shiki-token-constant)">Link</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">to</span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)">{´${window.location.pathname}</span><span style="color: var(--shiki-token-keyword)">/</span><span style="color: var(--shiki-color-text)">edit´}&gt;</span></span>
<span><span style="color: var(--shiki-color-text)">    &lt;</span><span style="color: var(--shiki-token-string-expression)">button</span><span style="color: var(--shiki-color-text)">&gt;Edit&lt;/</span><span style="color: var(--shiki-token-string-expression)">button</span><span style="color: var(--shiki-color-text)">&gt;</span></span>
<span><span style="color: var(--shiki-color-text)">  &lt;/</span><span style="color: var(--shiki-token-constant)">Link</span><span style="color: var(--shiki-color-text)">&gt;</span></span>
<span><span style="color: var(--shiki-color-text)">);</span></span>
<span></span>
<span><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> EditButton;</span></span>
<span></span>

We start by writing the functional component EditButton. It has a button element wrapped around by the Link component from React Router.

The link path is created by using window.location.pathname, which returns an initial '/' followed by the path of the URL as a string. Lastly, we add our /edit path.

The resulting link looks like this: ´${window.location.pathname}/edit

And there we have it. I hope you have found this useful.