I have a netlify site built with just html, css, js. I understand I can add a _redirect file to my project root that handles the routes that redirects all routes to a given page like so.
/* /index.html 200
If the user navigates to /brad it should redirect to /index.html.
My aim is to avoid creating a .Html file for every route. However I want to be able to keep the path as a variable (brad) or pass the path to the page. I want to access the variable (brad) in the js in index.html . My intention is to make a different action based on the path name. So /brad will work differently from /susan (where susan might be a user on the site).
An example would be if the user is not logged in log them in and send them to /brad (brad's profile page) after they log in or 404 page if no user brad exists. Here I need to keep track of which path the user originally accessed to know where to send them afterwards.
I know in server side code like php, laravel you can pass a redirect->with($variable) based on which route was accessed which can be accessed on the page that the user is redirected to.
Is it possible to pass the path of redirects on netlify as a variable to the js in the /index.html?
If no, would netlify be a bad option for sites that need to display dynamic routes such as www.example.com/profile/1 ? Should I go for a traditional server solution with a separate backend?
I use firebase for authentication and storing user data.
Following the comment from @ChalanaN, I created a 404.html page at the root of my project. Netlify displays this page for all non-existent routes. The page contains a script that gets the last parameter in the url and adds it as a query parameter on the link to the redirected page.
In 404.html
<script>
let givenPath = window.location.href.split('/').pop();//get the element after the last '/' in the url
window.location.href= '/index.html'+'?q='+givenPath;
</script>
In index.html
<script>
let redirectPath =window.location.href.split('=').pop();
</script>
Here the variable redirectPath
will contain the original path the user accessed.
So www.example.com/brad.html will redirect to '...index.html?q=brad.html' with 'brad.html' as the final content in the redirectPath
variable and now you have the redirect path in a js variable.
A warning: using 'index.html/?q=' will give a cannot get index.html/ 404 on your local machine when using live server so make sure there is no / before the page to be redirected if you intend to test locally.
As a sidenote, you could use window.location.pathname to get the path but that returns the path with the '/' attached to the path the user entered.