I have a flow in my app that has the user going through a few pages.
Normal flow would be 1 -> 2 -> 3
I want to restrict the user from going back with a prompt, which is not an issue, but if the user performs an action on page 3, I don't want to allow the user to go back to page 2. Is there a way I can change the back button destination to page 1 when the user sees a prompt on page 3?
My first idea was creating a useEffect that would check if they should go to page 1 instead of page 2, and modify the history stack, then clean it up in the return function of the useEffect. I can't figure out how to accomplish this right now since react-router v6 removed useHistory. Is there a better way to do this? Maybe with useBlocker?
Thanks!
Related
Is it possible to view the list of paths in the history object? I can see that there is the length but I need to see the actual paths.
The reason for this is for debugging purpose. I have 2 views (SPA) that gets displayed via their corresponding URL. But my problem is when I go from the first page to the next page and then I wanted to go back to the first page, I need to click the browser back button 2 times before it goes back to the first page. That's the reason I wanted to see what are the paths in the history object so I can check what entries are being added because as far as I can see, the code I have to add a path to the history object is straightforward:
props.history.push("/classes/" + courseId);
That's just the code so I don't know why I need 2 clicks to go back to the previous page.
Not exactly sure how to see the history stack, but you might be unintentionally rendering the page twice, so the history.push is working as intended. You can log in componentDidMount to see if it does, and be careful when using useEffect because that can cause that as well. If you're using react router check how the route is added in your app.js (for ex do <Route path="/classes/:courseId" component={courseId}> instead of <Route path="/classes/:courseId" render={()=>courseId()}>.
If a user goes to a page that requires a context beyond what's on the url, I'd like to redirect them elsewhere. The use case is:
/todos/list - this page shows the user their list of todos. It contains links to:
/todos/edit?id=1 - this page allows the user to view/edit details about a particular todo.
If a user were to go directly to /todos/edit (with no id), I'd like to redirect them to /todos/list. I have tried doing this via navigate('list') conditionally in the constructor. This does update the browser url correctly, but it doesn't render the /todos/list page. Is this possible to do? Or is this not possible to do the para below?
I understand the more common url would be /todos/edit/1 so that reach router would handle my issue w/out me needing to deal with it. However, I'm just using this as an example of a piece of information required to render the page that isn't necessarily part of the the url path.
of course as soon as I type the question in stackoverflow, I find the answer is in the docs right in front of my face:
https://reach.tech/router/api/Redirect
Say we have Home, Page A, Page B and Page C. If I do this:
Open Page B
Go Home
Go to Page B
This pushes at least 3 routes in the history object. If I repeat the steps, there will be 6 items. This is true when pushing directly via history.push and also when using the Link component's with the to prop.
The only way to keep complexity under control is by checking the previous location and then doing either history.goBack or history.push: Check history previous location before goBack().
The catch is that managing the history object can become a very complicated task very quickly. Just by adding a navigation bar that is rendered on every page in the app, you add at least "n-1" places from where you can go back home (assuming home is one of the navigation tabs).
Should we be concerned about this and handle the previous location?
Possibly related question: Why does the React Router history length increase on refresh?
Environment:
history is BrowserHistory
react-router#5.1.2
react-router-dom#5.1.2
Thanks to Elan Hamburger's comments, I now understand that the BrowserHistory is meant to behave like this. Normally, in the browser, if you go to page A, then to page B, then back to page A, clicking back 3 times will return you to the home page.
So you shouldn't really mind the size of the history object, at least certainly not if you don't have billions of users.
I have one odd requirement in one of my project, the requirement is -
1) On initial load of my web-app it should load initial page (first page).
2) If the user comes next time then he should be directly redirected to where he left previously - I'm getting the DROP STAGE from API.
3) When user comes next time then he is redirected to the previously dropped page, but on pressing back he could be redirected to the previous page of the page where he left
Now what I have done so far is -
I have used react-router-dom for routing, but the thing which happens to me is -
1) User comes first time and he is redirected to the very first page by checking the DROP stage from API
2) When user comes again, he has a DROP STAGE (from API) so I am redirecting him to the DROPPED Page.
3) When user press back button (mobile device), the user doesn't stays to the page instead he is redirected again to the DROPPED PAGE as I am checking the DROP STAGE on componentWillMount event and he is again redirected.
Workaround which I have tried are -
1) To set a localstorage variable on the dropped page and check that variable on the back button pressed page - BUT THE RESULT IS I GET THE LOCALSTORAGE VALUE AS EMPTY
2) To check the Action of page i.e. when the user press back button the action becomes POP, but the problem is when the user comes for the first time then too the action is POP - HOW CAN I GET THE ACTION AS PUSH ON INITIAL LOAD
How can I achieve my functionality. Please help
What you need is a module which will be called only once when the application is loaded but it should be loaded irrespective of which ever page the user accesses first.
What you can do is add an empty component in your main router file which should be the first to be called and is called in all the routes. And in the componentDidMount of the component, you should handle the redirection no where else. So the redirection will happen only once thus handling the back actions automatically.
React-router V4.x
React.js
I just have 2 pages called 1st page and 2nd page, 1st -> 2nd; I want to go back to the 1st page with some parameters, so I can display different views.
In official docs, I just saw go or goBack functions, unfortunately, it doesn't support passing a parameter!
So, can anyone help?
use route params for 1st page and assign 1st page url with data to back button of 2nd page. dont use go back or back.