Frontend Tips: Use Relative Paths Whenever Possible

Frontend Tips: Use Relative Paths Whenever Possible

Imagine your page look like this

- /blog/1/category            // list category page
- /blog/1/category/create     // category create page
- /blog/1/category/edit/1     // category edit page

Based this structure of your page, you should handle redirect to each page, then your code would be like this:

<!-- Page : /blog/1/category -->

<a href="/blog/1/category/create">Create</a>
<a href="/blog/1/category/edit/1">Edit</a>

Your URL will become long and tidious to manage, especially you use framework frontend like Reactjs. This spesific path called Absolute Path, absolute path start with /. There is another type of path, Relative Path. Relative path is not start with /.

If current page is /blog/1/category, then the Link of Relative path tags, it will redirect to /blog/1/tags. category and tags expect same level of path. If you want to move Lower level of path, use ../, it will redirect to /blog/1.

Using this mechanism, you can refactor the page to look like this :

- /blog/1/category/list       // list category page
- /blog/1/category/create     // category create page
- /blog/1/category/edit/1     // category edit page

Then, your Hyperlink should look like this :

<!-- Page : /blog/1/category -->

<a href="create">Create</a>
<a href="edit/1">Edit</a>

<!-- Inside Page Edit : /blog/1/category/edit/1 -->
<a href="../../">Back to List</a>

Relative path makes easy to navigate between the page with same level. Read more about relative path at here. Follow me for more tips and insight in web development.