Skip to content

Instantly share code, notes, and snippets.

@MelSumner
Last active April 26, 2023 21:02
Show Gist options
  • Save MelSumner/a1357ae7632424f4a7a151c573d58ed0 to your computer and use it in GitHub Desktop.
Save MelSumner/a1357ae7632424f4a7a151c573d58ed0 to your computer and use it in GitHub Desktop.

so let's say there's a route called like, about

Then the URL is pretty easy: https://mysite.com/about

But let's say that in the route you want to also render user or settings depending on the user's actions

What does that URL look like?

https://mysite.com/about/with/settings https://mysite.com/about?settings

Why I'm asking:

https://lego.com/manuals/23450.pdf is a pretty logical URL and I can sort of find things even if I don't know the exact URL.

https://github.com/{user}

As a user with AT, I kind of learn about the layout of the site from the URL; how will I do this with multiple "routes" per browser "page" ?

Acknowledging that state in URLs with query params is a thing so maybe it doesn't matter?

Like, this sort of URL exists: https://www.youtube.com/watch?v=JGuUY7dZhWs&embeds_euri=https%3A%2F%2Ftwitter.com%2F&source_ve_path=MzY4NDIsMjg2NjY&feature=emb_logo

or https://www.google.com/search?q=router

Maybe we want https://mysite.com/about?w=settings&q=router

mysite
-about
--our team

so say on the about page, we want to also show settings (or something), and then the user navigates to the nested "our team" page. What does the URL look like in this case?

https://mysite.com/about/our-team

https://mysite.com/about/with/settings/our-team <--this one doesn't feel like it makes sense https://mysite.com/about/

I don't have an issue with like, query params or whatever (see https://codepen.io/melsumner/pen/ZYQGwa)

If you delete the query param, you should get back what you were looking at before you changed anything If it's like, a flyout then that should be a query param

Think about deep links in like .net: https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-link-teams

Also, sitemaps: https://www.w3.org/TR/WCAG20-TECHS/G63.html and https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap

But we made localization in URLs work pretty okay, e.g., https://example.com/de-de/cats

what happens if you visit https://example.com/de-de do you get an error or the index.html page?

so maybe https://example.com/about/with/cats/settings where with is similar to de-de

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment