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.

comments powered by Disqus