I have a React application built with CRA. I have a login page and then a profile page. The flow is -
I first land on login page. The url is "www.abc.com/login?myParam=true". When i click on the login button, it goes to profile page. The routing happens with history.push like given below -
props.history.push("/profile")
Current behavior - I land on the profile page and the url is www.abc.com/profile
Expected behavior - I want to land on the profile page with previous page's search parameter(ie; www.abc.com/profile?myParam=true)
What I have tried - I can push extra param in the props.history.push from login page and catch it in profile page and make necessary changes in the url and that works. The problem here is that the I have to pass extra param every time I want to route(in every component)
What I want - I want make the change at one place, such that every time I do a props.history.push("/some-route") from a page url www.abc.com/this-route?myParam=true, I land on the page www.abc.com/some-route?myParam=true
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
I have an onboarding page like this www.abc.com/ welcome. On continuing users land on /set-profile image page.
There is a Submit on this page.
When users click on Submit button, if the user has come from /welcome, I want users to go to the configuration page, else I want users to go to /home.
The issue I am facing is, I tried both window.location and use history but I can't figure out how to find the "from" location.
What I am doing wrong?
You can't access the browser history from JS (that would be a security issue).
What you can do is add a query string to your /set-profile route (such as ?returnTo=/welcome) and use it for the redirection.
I have a page for posting projects and I want cancel to go back to the previous page but only if it's a page that belongs to my app.
For example, say I went to the post creator page from the User Settings page, then it'd look something like this.
User Settings -> Post Creator -> hit cancel -> call router.back() -> go back to User Settings Page
This can be done by using the useRouter hook and then calling router.back()
Butttt what if for some reason the Post Creator page is visited on a fresh tab. Is there a way to automatically redirect to the home page if the router history does not contain my app?
For example,
Post Creator -> hit cancel -> No history containing current app -> redirect to home page.
I know this is a silly edge case but I'm wondering if it can be done.
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.
I'm facing a problem don't know how to solve. I would like to get some light here.
Given an AngularJS application that routes using the standard $routerProvider, and considering the fact that whenever an end user tries to access a private area he gets redirected to the register area, happens the following:
User just landed onto de application (didn't get logged in).
User goes to /profile
The application checks whether there is session info in the client or not.
The application redirects to /profile/register
User clicks on "Back" button of the browser and goes to /profile.
(Next step is number 3 again and again).
This happens because each time the application redirects using the $routerProvider, it pushes all routes in the browser history.
My question is, how can I jump the failed /profile access over the browser history? How can I tell the browser do not save this route under given conditions
like the user is logged in?
FAQ regarding history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Supposing you're using the $location built-in service to redirect, you can use $location.replace() to replace the current history entry:
if (notLoggedIn) {
$location.url( "/profile/register" );
$location.replace();
}
Note that this will apply to current digest only, as noted in the API docs.