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 />.
Related
I'm trying to expand a bit on the nested routes example over at react training in the quick start guide.
Code sandbox: https://codesandbox.io/s/routing-test-ubpjp
In the code sandbox browser, if you navigate to /some - this works, then click SomeOne - this also works. However, clicking "SomeTwo" which should redirect to "Some" loads blank, why?
Also, those links fail to work right off the bat? There might be some strange stuff in the sandbox as I've been hitting it with random stuff to try and get it working.
I just want to structure the routes such that I don't have to have all of these routes in one file.
I've done a lot of searching and have tried a lot of different kinds of implementations, but all of them end up having issues / problems, either with adding a catch-all route, or redirects.
Removing the props from the Switch worked, but this breaks the AnimatePresence from framer-motion.
Following the example of framer-motion at: https://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js
The redirect still fails, even with the withRouter hook on the Navigation and redirect component.
You need not pass any props to Switch component. Also make sure that you are rendeing Navigation component as a Route or use withRouter HOC, so that it received Router props.
<Switch>
{children}
</Switch>
I am using React Router with React Transition Group to animate between routes. I have a problem when I use a <Redirect /> component. The App works, but I get multiple warnings from React Router that reads:
Warning: You tried to redirect to the same route you're currently on: "/"
You can see it happen in this Code Sandbox. Make sure to open the sandbox console and then enter a bad path (like codesandbox.io/abc).
I tried following the example they give in their docs (https://reacttraining.com/react-router/web/example/animated-transitions), but that does not include a Redirect. Is there a better way to use Redirect and Transitions to avoid the warnings?
This issue occurs when a <Redirect> mounts within the animation components.
Instead of wrapping your animation components around <Switch>, wrap the <Route>'s child component. (You may need to use the <Route>'s render prop vs its component prop.)
This approach eliminates the need to pass the location prop to <Switch> -- instead each <CSSTransition/> references location.
See example: https://codesandbox.io/s/nn5r595joj
I am working on a react app where I want to stop my component from unmounting based on some conditions.
As far as I have researched I found one option of setRouteLeaveHook using react router (as mentioned here).
But the problem is I have same route i.e url is same for both components. Also I don't have this.props.router option or this.context.router option where I can pass this.
Is there something I can do ?
In the React-Router documentation I have seen that It has import both Route and Router modules from react-router-dom. I would like to know what is the different between those two modules?
Router
Router component is what makes the connection between browser location and the react application. It doesn't render anything visible on your page. It just exposes API to interact with location changes of the browser via React context. So any component down the tree can use this API to change their behavior based on location changes in the browser or change the browser location into what they want.
Router is the abstract for all other specific router components. Practically, we use a specific implementation of it like BrowserRouter, MemoryRouter, and HashRouter which use different methods to manage browser history. Also, Router is usually a top-level component in the component tree and use only one time in the entire application. All other react-router components should be descendants of Router as they can't function without the API which Router provides.
Route
Route is much simple to explain. It just renders some UI when a location matches the route’s path. So an application can have many Routes based on its layout complexity in different levels of the component tree. Also, Route has some additional props to configure how the match should happen. Route internally use API provided by Router to access the location and decide whether to render the given component or not.
I am pretty new to React-Router, I wonder if there is a simple way to change Route, some concept like state in Angular UI Router. From the React Router official tutorial :
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating
My understanding is: I have to manually change the url to trigger route change.
What exactly are you trying to achieve? Did you take at look at the react-router Link component?
Perhaps the most used component in your app is Link. Its almost identical to the <a/> tag you're used to except that its aware of the Router it was rendered in.
React-Router Tutorial / Lesson 3: Navigating with Link