I'm creating a data fill in page, and I want to ask users to confirm that they want to leave the page. I see that react router provides an onLeave function with no arguments, but I don't see how to use it in the way I need.
Thanks
Related
While I was using Link in React Router and history.push method,
I realized I have used those two method without proper knowledge.
I have used Link tag makes user possible to go to another component, and used history.push to make back button available.
But hard to tell the difference except history method stacks a trace.
What is the difference between Link and history.push besides I have mentioned above and how to use them properly?
With the Link you can navigate to another "page" by wrapping it for example a button and do the redirect when clicking. Mostly this is what you probably want to do.
But in some cases you want to navigate to another "page" programatically. For example when something changes in your app that has nothing to do with clicking on a button or link.
So you can use history.push to change the url programmatically without the need to click on a button or a link.
I hope this clears it for you
I have a spa that consists of a homepage, categories, about us and contact us.
They all take you to a different component except categories that should take me to a part of the homepage.
Is there a way how to do it with React-router or is there another way
to do it?
It is hard to give feedback without seeing your code.
But if I understood correctly, you want to navigate between the different components using React-Router.
You can import the Router, Switch and Route from React-Router and then in your toplevel-container component, you would create the different for each component, making the URL change based on each component, e.g. /about-us, /contact-us, etc.
If you want your categories to be part of your homepage, then you could create another inside Homepage component, where you want it displayed, if it's only rendered at a specific URL. If you want it displayed at all times, then make the link go to the /homepage URL, same as for the regular homepage component.
I have a multistep wizard with each step a react-router route.
Currently if the user navigates away to an external link, they lose all their state.
Is there a catch all in react-router-dom or react-router where I can warn the user and allow them to cancel?
There is a component for this. Check out the Prompt component here:
https://reacttraining.com/react-router/core/api/Prompt
Here's the example they use:
<Prompt
when={formIsHalfFilledOut} // <- function that returns boolean
message="Are you sure you want to leave?"
/>
I think you are looking for Blocking Transitions under the history api for React Router.
As per the example on react router history github page:
You can register a simple prompt message that will be shown to the
user before they navigate away from the current page.
const unblock = history.block('Are you sure you want to leave this page?')
Detailed info at https://github.com/ReactTraining/history#properties
In older versions I could use setRouteLeaveHook within my component.
For example (SO): Detecting user leaving page
With react router v4 the logic has changed away from injecting the router itself into the components and I only found the following function on router v4:
BrowserRouter. getUserConfirmation
I am a little bit confused, why I should link the confirm behavior with the Router itself and not with a specific component!?
How can I place a confirm window, when leaving my component (linked to my current route), while being in a certain state? This seems to be not supported by the function above.
I think the Prompt component is what you're looking for. Just render it in the component you want to confirm navigation form, i.e. the same component you render in your <Route>.
react-router-navigation-prompt also does what you want: it is a more powerful <Prompt />.
Any quick-and-easy answer to the scenario where you want to build something like a simple questionnaire with React and React Router where you don't want the user to be able to modify the URL to browse anywhere and you also don't want to push history state into the browser, essentially preventing use of the back button?
Sample routes might look like:
questions/1
questions/2
questions/3
...so on
But the URL should stay the same at all times and the history won't change, essentially what a single page app without routing would behave like.
For the history part, you would need to use replaceWith() everywhere you want to change route.
If you're using <Link>, you could create your own version which uses replaceWith instead of transitionTo - you should just be able to copy its implementation and replace the PropTypes require call with require('react-router/lib/PropTypes').
I can't immediately think of a non-horrible way to prevent the user from jumping around though - presumably you also want the app to break if they try to start on anything but the base URL? I would just use some simple state to control which component is currently being rendered instead of using React Router if that's the behaviour you really want.