+ 11

React-router resets all states of App component when I change route.

I have 3 components, let's say <App />, <Login />, <Page /> One should only be able to use page component route only if he is logged in, so i have a state in app component : isAuth which is set to false by default. I pass it to page component via props and before returning my main stuff on page component, I check if isAuth is false and if it is then I use <Redirect /> to login route. Now once I am logged in then I set isAuth to true via props I get in login component. But when I again try to check on page it won't let me because states are reset to initial values. How do I prevent that?

29th Feb 2020, 10:23 AM
Raj Chhatrala
Raj Chhatrala - avatar
19 odpowiedzi
+ 9
If you change it manually then you basically reload the app completely which resets the state. You need to implement a persistent authentication mechanism. For example, save a user token in local storage. Then you can check for valid token whenever a user enters the site.
29th Feb 2020, 12:46 PM
Burey
Burey - avatar
+ 5
🔫 Rick Grimes Do you use <a> or <Link> tags for navigating between routes? Also a little bit of code would give us a clearer picture
29th Feb 2020, 11:32 AM
Burey
Burey - avatar
29th Feb 2020, 1:12 PM
Burey
Burey - avatar
+ 4
🇮🇳Vivek🇮🇳 Logout component is in page component, but I won't be able to access it because when route changes isAuth is set to initial value which is False.
29th Feb 2020, 10:58 AM
Raj Chhatrala
Raj Chhatrala - avatar
+ 4
So how does the url changes? Try adding a <Link to={...}>...</Link> and check if pressing it also resets the state
29th Feb 2020, 12:23 PM
Burey
Burey - avatar
+ 3
For now I am changing url manually. Let me check on with <Link> Meanwhile I uploaded code at github.com/DeveloperRaj/ExpenseTrackerReact
29th Feb 2020, 12:28 PM
Raj Chhatrala
Raj Chhatrala - avatar
+ 3
Oh well, I get it now. Burey i just tried using <Link> and it is working fine now. About local storage, anybody can edit it right? Then how do I prevent that happening?
29th Feb 2020, 12:50 PM
Raj Chhatrala
Raj Chhatrala - avatar
+ 3
Well then, JWT it is. I will check for a good video from traversymedia Thanks both of you Burey and Sarthak 🇳🇵
29th Feb 2020, 2:43 PM
Raj Chhatrala
Raj Chhatrala - avatar
+ 2
🔫 Rick Grimes Then encrypt the authentication token. You needn't hide the local storage data. Encrypt it with password. I recommend you to use 'jwt' package, NodeJS for encryption instead of custom encryption algorithm.
29th Feb 2020, 1:05 PM
Sarthak
Sarthak - avatar
+ 1
Burey No i am not using <a> or <Link> for now but I will be using it in future. Problem here is, when URL changes all state goes to initial values. Wait, I'm gonna upload code to GitHub
29th Feb 2020, 12:17 PM
Raj Chhatrala
Raj Chhatrala - avatar
+ 1
However, using the local storage in React's function components is a side-effect which is best implemented with the Effect Hook which runs every time the value property changes: import React from 'react'; const App = () => { const [value, setValue] = React.useState(''); React.useEffect(() => { localStorage.setItem('myValueInLocalStorage', value); }, [value]); const onChange = event => setValue(event.target.value); return ( <div> <h1>Hello React with Local Storage!</h1> <input value={value} type="text" onChange={onChange} /> <p>{value}</p> </div> ); }; export default App;
1st Mar 2020, 6:59 PM
Andrew Sokolenko
Andrew Sokolenko - avatar
0
I think. Because you are already logged in. Is there any logged out component which can set isAuth : false?.
29th Feb 2020, 10:56 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
0
I think. React router doesn't reset state.
29th Feb 2020, 11:11 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
0
Leonard Lee don't spam.
1st Mar 2020, 3:13 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
0
hi
2nd Mar 2020, 2:48 AM
Hernan Emanuel
Hernan Emanuel - avatar
0
🔫 Rick Grimes I just solved a similar question today. https://www.sololearn.com/Discuss/2404081/?ref=app Here a code that demonstrates page protection via login which was further modified code that given from the question. (i set to private code since part of the code is not belong to me :)) https://code.sololearn.com/Wkr72RF2dNh1/?ref=app
21st Jul 2020, 9:13 AM
Calviղ
Calviղ - avatar
- 3
I h.hmumberH U I'm in H Have hi. Haha his my M NM b b. but h.hbhh JhOhhhh. . Hav.hn.h . On be there JhOhhhh H Jmumi Junk n in.. Ohh in j J number( /n Nmn~
29th Feb 2020, 7:36 PM
Leonard Lee
Leonard Lee - avatar
- 3
🤗😎🤗 ChineseChineseh . ChineseChineseh b.jju. Hihi Jumbo . Haji b. H. Mun .bju.. Chi ChiN. Nun Wahhh this jh.h .
29th Feb 2020, 7:36 PM
Leonard Lee
Leonard Lee - avatar
- 3
Have~m JNunn . June bm . Wahhh but I. Jmu Bm H J K Wahhh nnjn
29th Feb 2020, 7:36 PM
Leonard Lee
Leonard Lee - avatar