React Router V4 Route undefined (NoMatch) re-renders whole app and resets Redux state? ​ - react-router-v4

While there is a similar question to this already it hasn't helped my issue.
I'm using React Router V4 with React and Redux and am finding for any undefined routes that the whole app is refreshed as is the redux state. Would this be working as designed and normal? I haven't been able to work out how this is happening but would appreciate any ideas. Is anyone else seeing this behaviour? Is it actually an issue? Thanks for your thoughts.
NGWP.

Related

Something I can use with React Native for web

I like React Native's some features like Flatlist, Modal, Animation. I wanted to develop for web with React Native or Expo. I use react navigation but have 404 errors in refresh pages. I also want When user put www.mywebsite.com/post/postid, it will go directly into postid's page. I tried react-router-dom with HashBrowser. Not great! I kind of want something better than hash browser. What can I use? Any advice please.
I use also react-native-web and react-navigation. If you want the react-navigation to work with the links correct, you must set up the config object like the documentantion
If you don't set up correctly the config object, react-navigation doesn't throw errors in your console, but it doesn't work right!
The question was before 3 months, but I hope this answer helps someone, with the same problem!

How to start Redux in React Native

I am new to React Native and I want to add Redux to my project.
And I want to know if redux store values are saved when app is exited.
If it is not saved, how can I handle this problem?
In web development, we use cookie and local storage. Thanks in advance.
[Edit]
If I must use async storage, is there any easy way to approach this?
Redux state is usually emptied upon when an app is exited (not minimised).
What you should to instead is to use AsyncStorage to persist your access token, and get them from same storage when the app starts. You can do this in a didMount lifecycle, or any other means you may choose.
There is Ayncstorage for react native which is equivalent to localstorage in browser.
You can refer this
https://reactnative.dev/docs/asyncstorage
Or you can use redux-persist if you want to persist redux store when app exits which would otherwise get lost.
https://github.com/rt2zz/redux-persist

Can't make Mutation to work using react-apollo-hooks with React Native project

I have a React Native project and I would like to make Apollo GraphQL work. I tried everything, I refer the issue I am having which I did the submission here: TypeError: Cannot read property 'data' of undefined at MutationData.onMutationCompleted (react-hooks.cjs.js:654)
Am I doing something wrong in configuration or usage?
Any suggestion would be very helpful.
Thank you,
Andrea

How to make React Router V4 routes work with React Transition Group (low-level API)

After transitioning from React Router V3 to V4 I can no longer get the React Transition Group Low-level API to work. The documentation of React Router shows an example of the High level API with CSS animations which do not work with the Low level JS flavor.
Anyone managed or knows to get this to work?
It's been a month so I guess you found your way around, but it may help others.
I created this : https://www.npmjs.com/package/react-router-v4-transition after I encountered the same problem.
It provides a kind of transition-group in a switch component. Appart from changing your Switch to TransitionSwitch, it shouldn't require big changes.
I'm going to publish an update in the following days, probably Monday, that solves a little issue with the components implementing the lifecycle hooks.

Hot reloading doesn't work on a react-native app with react-router-native and redux

I'm starting with react native and I have a little experience with React, Because of that I want to use redux, react-router, and react-router-redux, which I have used in the past for a web React app.
All those packages can be used in react-native, except for react-router, the closest I could find is react-router-native which seems to work much like the browser version. So far so good, I made a quick and dirty app to test the router, redux, etc.
But I'm having some issues I can't figure out how to solve or debug: When changing the visuals like the text or some styles, the HMR seems to work fine, applying the changes in real time, but when I change some other module/file, like the container element (where the redux connect() function is called) or some code on the reducers, the HMR doesn't change anything and I have to reload all the app to see the changes.
Here is my code: https://github.com/DenJohX/test-react-router-native It basically just changes the color of some text by toggling a variable in the redux store. Sorry for just linking it but I think its better to show you all the folders and project structure, maybe I'd just goofed something in there or didn't use the correct folder structure.
I'm using https://github.com/jhen0409/react-native-debugger to debug the app, and by the console messages, the HMR does run and patches something but without affecting the current loaded code.
To test the problem, try to edit the colors in src/screens/pageOneContainer.js, the HMR should change the code, re-render the screen, and show the new colors, but they just stays the same.
Thanks in advance.