In react-router v4, onEnter was removed because of the new organization of the project, I get it.
But I used it to fetch data from the server before rendering the component.
It was suggested to use componentDidMount and fetch form there, this would work, but I use redux, and the code inside map(State|Dispatch)ToProps function expect the store to be up.
My current solution is to put some if's to check if it has data, and render empty, but that does not look to good...
Is there any documentation/example that I can see about using react-router v4 with redux?
Related
I want to store my component where I call API and get data in stack, so on pushing new component and then going back it should maintain it's state.
I am not using any package for navigation.
If you want to save this data, I may suggest you to store it using redux, or using react context
I start with reactjs using reduxjs and react-router-dom
I have some route like main/route-1, main/route-2 ... And i want to call some api to get data in each router when user access or refresh. have any way to hanlder access router url to call special api with that router ? what best way to do that thank.
I don't know any way that you cant call API through the router. But you can call API when component loading. use axios to call the API inside the componentWillMount() function.
Edit: After I look again in documantation they mentioned that componentWillMount method is considered as legacy and don't use it. So you cant use componentDidMount it will call API immediately after the component mount. Their documentation also said that the componentDidMount is a good place for instantiating the network request.
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 ?
Which is better?
I tried onEnter but that lead to flickering between paths. The onEnter check ran before the component was loaded. It routed and then re-routed after user was authenticated which was visually unpleasing. Now I'm just using Main component's componentWillMount lifecycle to run the authorization code and re-route if is resolved else stay there. If I use only lifecycle method to check then I can't use Link component from react-router. Any thoughts on how to solve the flickering or improve the client side security without crappy ui.
First of all you should do it in the componentDidMount and not on the componentWillMount since it can freeze the entire application if the process takes some time.
As for your problem, you can do the check in tje componentDidMount and then use react router's browserHistory to manually push the url.
Take a look at the histories docs of react router:
https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md
guys. When I go through the documentation of redux-router, I just cannot understand why do we need it?
Here is what the documentation is trying to explain:
React Router is a fantastic routing library, but one downside is that
it abstracts away a very crucial piece of application state — the
current route! This abstraction is super useful for route matching and
rendering, but the API for interacting with the router to 1) trigger
transitions and 2) react to state changes within the component
lifecycle leaves something to be desired.
It turns out we already solved these problems with Flux (and Redux):
We use action creators to trigger state changes, and we use
higher-order components to subscribe to state changes.
This library allows you to keep your router state inside your Redux
store. So getting the current pathname, query, and params is as easy
as selecting any other part of your application state.
As far as I can understand, it is trying to say redux router can keep router state inside redux store so that we can get route info more conveniently.
But within react-router, I can also easily do it.
Like path="messages/:id", I can use this.props.params.id to get the params.
Can someone explain in what scenario redux-router bring its benefit?
Redux (and in general, the flux pattern) is all about having the entire application state stored in one central place. This has the benefit of easier debugging and makes it easier to implement certain features.
If you've ever used the redux-devtools in a react app with react-router, you'll notice that its only of limited use, because you can't replay the entire lifecycle of the application. When the user changes routes, that's not recorded in the redux store. Redux Router keeps the route state in the store.
You could use this for debugging, you could serialise the entire store history and log it elsewhere to replay user sessions. You could hook into it to implement full undo, or log analytics events.
redux-simple-router is a library which could help you understand how to use react router in a redux application.
It is a very simple library stores the URL in redux state and keeps it in sync with any react-router changes.
redux-simple-router compared to redux-router is:
Much smaller and simpler. You don't need to learn another library on top of everything else.
Encourages direct access of react-router APIs. Need server-side rendering, or something else advanced? Just read react-router's docs.
Only stores the current URL and state, whereas redux-router stores the entire location object from react-router.
Follow one of the these 2 examples to get up and running:
redux-simple-router-example
redux-frontend-boilerplate