What I want is to prevent some routes from being triggered manually via the browser URL. So, is there any way to tell if the route to be applied has been triggered manually(typing in the browser URL location) or through React router (<Link> or useHistory().push)?
When a user manually browses the entire app is remounted, when react router is used the route is "fake" and only what is new is mounted. You could set window.location to state in a component above your routing logic that is set on mount. This would stay the same when react router does the routing, but change when manually routing since the app would remount. You could examine this route for sub-paths to see if the user manually browsed.
I would suggest using protected routes instead. You could "enable" the routes when the conditions you need in your app are met.
Related
Using the router, window.location, the link element and also the href provided by react to my knowledge do generally not cause a re-fetch of the entire react application but only cause a mounting of a new component. Is that correct?
But if I for example change the URL in the browser's URL bar from localhost:4000/hello to localhost:4000/bye will that cause a re-fetch of the entire react application or does react somehow stop the browser from doing that by recognizing that it is the same domain?
And what about the behaviour of the browser's refresh and back buttons in regards to this matter?
if you change URL by window api its refetch whole react again. but if you change URL by react router api its only change page components
I trie to render a certain route if a token is valid , previously set when logging in , if not valid i redirect the user to the home page. But when i compile it kept showing a blank page. The registered token aims at protecting routes , so when user who was not logged in can't access the '/auth' endpoint.
Here is the code :
If there is a change in cookies, React would not be informed, hence your component will not be rendered to render the right Route. A React component only updates when its props or states changes, or the parent component renders it directly.
You can listen to cookies and set a state to notify React that cookies has changed.
I found another solution for this problem and it works fine actually.
Code :
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
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 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.