I am using a textbook example of React Router v6 on my site according to the docs.
The site already has pre-existing behaviour that utilizes the hash. For example, I have a modal that appends a hash to the URL when it is open. The current behaviour of the site is that when a browser sees that hash, and you press the back button, it will ignore all hashes at the time (even if the hash appends to the browser history)
Go to site.com
Interact and open a modal : site.com#modal
Close modal
Interact and open another modal : site.com#modal2
Check browser history and see 3 different entries from steps 1, 2, and 4
Click the browser back button
Notice that it will take me to the page in history before step 1
But on a page that is using <BrowserRouter>, I observe the following steps:
Follow steps 1-5 above
Click the browser back button
Notice that it take me to the previous hash URL in step 4
Click the browser back button again
Notice that it take me to the URL in step 1
Because this is only happening on the page with <BrowserRouter>, I have to assume that it's overriding that pre-existing behaviour.
How do I get RRv6 to fallback to this desired behaviour? Preferably without altering the existing modal behaviour, which I assume is one way to do this by using location replace instead of appending to the history. Requirements are to retain the <BrowserRouter> and not to swap to <HashRouter>.
My search results are being poisoned by thinking I want to implement a hash router, this is incorrect.
Most similar question I could find
React Router Browser Router with hash fragments combined? - perhaps one solution is checking location.hash and hooking into the popstate event to go back to the base URL if there is a hash. But it seems like a workaround.
Related
I have a react app that is held on gh-pages. This page has a '/Main' as its home route and a '/le' route which has been linked in the Main. This link, which is styled in the form of a button, works perfectly.
The problem arises when I try to go to the gh-page URL profile.github.io/le(this is the url where the router link takes me to when I click the button) , it takes me to a dead GitHub page. Why am i able to navigate there using router link but not access it directly by the URL.
Navigating within a single page application uses a trick: it replaces the content and modifies the URL (there is an API for that) without causing a full page reload, the server doesn't even notice those kind of navigation. That modified URL's path could be anything, it does not have to correspond to real files.
When trying to directly open such a routed URL though, you are asking the github server to deliver content for that location and it tries to find a file at the given path. When there is no such file, a 404 page is shown instead. The server does not know you actually want to open the entry file and let its internal (react) routing do the actual navigation work.
There is a helper which replaces the 404 page and augments the entry page to get the desired behavior: https://github.com/rafgraph/spa-github-pages
My scenario is I have a form which have multiple steps before the process is completed and form is submitted and each step is represented by route.
What I want to achieve is if user clicks back button on any step, I want to clear history and want to restrict him from going forward.
For example, the form include 4 steps. If the user is on step 3 and clicks back, I want to take user back to previous route using history.goBack() but at the same time, I want to clear all forward history so that user cant go to step 3 using browser buttons as well, (in this case, entry for step 3 should be removed from history so that user cannot access or move forward using browser buttons).
I searched but could not find anything related to this. So posting here.
I'm using the history fragment to capture the url after the hash for an angular-based site we've built.
Not all my pages are showing up under All Pages in Google Analytics - but DO show when i add page as a secondary dimension to events.
I think this is to do with using the history change trigger to send url fragment as a pageview, but I can't figure out how to make it work.
How do I make sure an exit page is captured, even though it isn't reloaded hence no new history fragment?
(register.creditunions.com = tracks fine, but when someone completes, it goes to /confirm, which they leave, and which is not tracking. I have the confirmed sign ups in my CMS, and they HAVE to go through to that page to get signed up, hence i know i'm not just asking about a page that isn't being seen.)
Google Analytics doesn't detect URL fragments as a part of page path out of the box. You need some tweaks to force tracking of anything after the hash. There is a lot of recipes all over the web. Try this one https://www.simoahava.com/gtm-tips/track-url-fragments-as-pageviews/
There are 2 web applications, ours and the other team. The other team's web app is http://otherteam.com and our application is http://myteam.com
On http://otherteam.com webpage, they have an href link pointing to our page which is http://myteam.com/config?lang=en. When our web application(actually Marionette AppRouter's task) receives that kind of route or path, it will parse it and set the language configuration and then we have a code to redirect the user to the final webpage which is http://myteam.com/landingpage
The code that we are using is
Backbone.history.navigate('landingpage', {replace: true});
to redirect the user to the final destination.
Unfortunately, when user clicks Back button of the browser, it doesn't go back to http://otherteam.com. It will go back to http://myteam.com/config?lang=en which is still our own application. What happens is that the Marionette app router will parse it again similar to how I described it above. The user will just be brought back to http://myteam.com/landingpage
So I changed
// Backbone.history.navigate('landingpage', {replace: true})
and now I'm using
history.replaceState({}, '', 'landingpage');
When I click Back button, the url on the top bar beocmes http://myteam.com/config?lang=en, but it doesn't reload our landingpage anymore which is good. However, nothing happens to the page until I click Back button again. After making the second click on the Back button, I'm back to http://otherteam.com which is great but I had to click the Back button twice.
The problem is you are redirecting the user from the /config?lang=en to another page, so when you click back, they land on the previous page and are then redirected back to the landing page again.
The simplest solution here would be for otherteam.com to link to your landing page and pass the params to be consumed there - http://myteam.com/landingpage?lang=en. Redirecting the user multiple time is never a good idea, and almost always unnecessary.
Once you have received the lang config param, it could be an idea to save it to local storage so it can be retrieved wherever it is needed throughout your app.
In my application I have a page that display several tabs. All the informations are gathered with a single HTTP request. Every tab contains an HTML form. By default on the load of the page we load the first tab. After a modification within any tab we reload the page for informations refresh (following en INSERT/UPDATE in a backend database). What we want: if before any update we were on a particular tab (any other than the first one), to return on the same tab.
I thought at several solutions:
To use different URL for different tabs (panes), namely URL routing. For example, domain.ext/page/tab. There, I have a problem because the URL must update following user trace. If the user click on a 3rd tab, we have to change the URL to domain.ext/page/3rd-tab using $location.path() which triggers page reloading.
To use the same URL (what we have now) and anchors in the page managed by $location.search() and reloadOnSearch = false. For example, domain.ext/page?pane=tab. There, I have another problem because the query string (that is managed by $location.search()) is kept at service level and when the user goes on another page, the query string is the same (domain.ext/another-page?pane=tab). I would like to delete the query string when the user leaves the page.
To use ui-route. This solution change lot of the actual structure of the application.
IMHO the 2nd solution seems better except that I don’t know where and when to reset query string.
I’d like your opinions on this topic.
Thanks.