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.
Related
I have a react app with multiple routes. On one of my routes I only want to render a certain component if the user navigated from a specific route. How do I check the previous path used to get to the current route? Thanks
I'm trying to detect when the page location changes in a react app using the Xamarin forms webview .Navigated event. However, it seems like it's only issued when I navigate to an external page, not within the react app, even though I'm using react router. In my browser, the url changes but the Xamarin webview doesn't register that change, even if I manually poll the url by printing webView.Source.
Is there some way I can detect a navigation within the react app from C#?
If you want a component to be location aware, you can wrap it with the HoC withRouter provided by React Router.
You can get access to the history object’s properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will re-render its component every time the route changes with the same props as render props: { match, location, history }.
Once you're getting location change updates in your react app you can update your C# to perform any actions you require.
EDIT: To address your comment...
Now I've never used C#, but according to my research this should work.... take a look at __doPostBack. You can read about how to use it here.
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 />.
I don't get the docs from React Router below:
But now Home can't participate in routing, like the onEnter hooks,
etc. You render in the same position as Accounts and Statements, so
the router allows you to have Home be a first class route component
with IndexRoute.
What does he mean by routing here? What is onEnter hooks?
Since App is wrapping other routes, the route that matches the given url is passed to App to be rendered via this.props.children. Because of this, you don't get access to react-router's hooks for Home if you do render Home via a statement such as {this.props.children || <Home/>}. One such hook isonEnter, which fires off a callback whenever a route is entered.
When you define Home as an IndexRoute, it is a distinct route that will match whatever route App matches. This way, we don't need the or clause in App, we can just render the child route via {this.props.children}
The docs here are a little more straightforward:
Imagine we'd like to render another component inside of App when the
URL is /. Currently, this.props.children inside of App's render method
is undefined in this case. We can use an <IndexRoute> to specify a
"default" page.
As far as onEnter the docs here are better:
Routes may also define onEnter and onLeave hooks that are invoked once
a transition has been confirmed. These hooks are useful for various
things like requiring auth when a route is entered and saving stuff to
persistent storage before a route unmounts.
I have all my /api routes that require auth going through node but I want to also expose and have web routes that I can do in react and decouple from the server.
Is there a way to have react (or react router) handle web routes?
Well, that's basically what React Router is for. It'll act upon changes to the URL and instantiate the component that you specify in your routes.
Without React Router, just treat it in the same way as you would any JavaScript project: listen for history changes or hash changes and re-render accordingly. But with React Router you have a solution that integrates with React and provides utility functions and hooks to make life easier.