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.