How to let users bookmark *real* URL paths?

[mablinov]

Hi all, massive react-router noob here,

Let's say I'd like to have the following routes:

• example.com/: The top-level landing page
• example.com/about: The about section
• example.com/login: The login page

Now, assuming that the user first accesses example.com/, then there's absolutely no problem for React router to then send the user to the virtual route about (Say, there's a button on the top-level landing page that takes them there.)

But now, imagine that the about page is super useful, and a user bookmarks it. So then, when they open a fresh tab and try to navigate to example.com/about, ofcourse the GET request will try to get at the about/ resource, which ofcourse doesn't actually exist, and the user gets a 404.

I would really like to get something like this to work - I'm aware there are "hacks" like the hash routing stuff where you can do example.com/#/about, etc.

But I actually noticed, that the React routed documentation pages seem to implement this feature! E.g., if I click that link, and start clicking on random pages in the sidebar, I can see in my Network tab entries like

GET https://reactrouter.com/en/6.6.0/router-components/browser-router?_data=routes/$lang.$ref/$
GET https://reactrouter.com/en/6.6.0/router-components/memory-router?_data=routes/$lang.$ref/$
GET https://reactrouter.com/en/6.6.0/fetch/json?_data=routes/$lang.$ref/$

But then, if I try to access for example, the https://reactrouter.com/en/6.6.0/fetch/json page directly, that then goes on and actually does a real GET request for the specific resource, i.e. I see in my Network tab

GET https://reactrouter.com/en/6.6.0/fetch/json

I'd love to know how replicate this "dual-use" setup - I mean, I can both navigate to whatever page I want via React Router (and its super fast, because its really just an SPA that fiddles with your browser history), but I can also go directly to the URL I want, and that works too.

[mablinov]

This StackOverflow answer seems pretty comprehensive, but it was posted in 2016 - I wonder if there isn't something new since then?

[kiliman]

Depending on your backend server, you should configure it to return your main index + scripts for all * requests. Then on the client, React-Router will take over and render the appropriate route based on the URL.