This app highlights the power of Routify 3 in managing user authentication and securing routes.
The /signin and /signout routes handle the user authentication. Routify 3’s role is to redirect users based on their authentication status - post login or logout.
The /admin route showcases Routify 3’s capacity to secure routes. If an unauthenticated user attempts to access this private route, Routify’s load function triggers a redirection to the sign-in page.
An admin page using guard hooks.
{
"message": "ok",
"result": {
"properties": {
"created": "2025-03-27T07:42:11.326Z",
"edited": "2025-03-27T07:42:11.326Z",
"name": "Luke Skywalker",
"gender": "male",
"skin_color": "fair",
"hair_color": "blond",
"height": "172",
"eye_color": "blue",
"mass": "77",
"homeworld": "https://www.swapi.tech/api/planets/1",
"birth_year": "19BBY",
"url": "https://www.swapi.tech/api/people/1"
},
"_id": "5f63a36eee9fd7000499be42",
"description": "A person within the Star Wars universe",
"uid": "1",
"__v": 2
},
"apiVersion": "1.0",
"timestamp": "2025-03-27T10:32:50.415Z",
"support": {
"contact": "admin@swapi.tech",
"donate": "https://www.paypal.com/donate/?business=2HGAUVTWGR5T2&no_recurring=0&item_name=Support+Swapi+and+keep+the+galaxy%27s+data+free%21+Your+donation+fuels+open-source+innovation+and+helps+us+grow.+Thank+you%21+%F0%9F%9A%80¤cy_code=USD",
"partnerDiscounts": {
"saberMasters": {
"link": "https://www.swapi.tech/partner-discount/sabermasters-swapi",
"details": "Use this link to automatically get $10 off your purchase!"
}
}
},
"social": {
"discord": "https://discord.gg/zWvA6GPeNG",
"reddit": "https://www.reddit.com/r/SwapiOfficial/",
"github": "https://github.com/semperry/swapi/blob/main/CONTRIBUTORS.md"
}
}
Fetch data with the load hook before component render.
meta.history allows navigating between previous route states. Try click Revisit and then navigate back.
Using <slot inline={{params}} />, we can pass 4 city names. This will create 4 instances of inline-params/[city].