1. Home
  2. Posts
  3. Frontend Tips: Use Relative Paths Whenever Possible
cover

Frontend Tips: Use Relative Paths Whenever Possible

2 Minutes

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.

Stay Updated: Join The IO Hub

Be the first to get the latest updates, articles, and resources. Join the IO Hub on Telegram.

comments powered by Disqus