Update site immediately after setting Local Storage - reactjs

Question

I am making a mern stack application and currently I am trying to switch between the login route and main page depending if you are logged in or not. However, this only works once I refresh the page, is there any way I can make it work without having to refresh the page?
App.js
{!localStorage.getItem('token') ? (
<Redirect exact from='/' to='/login' />
):
<>
<Navbar />
<Redirect to='/' />
</>
}

Answer 1

Reacting to changes in local storage is -at best- a weird approach. In practice, the only way for a component to re-render, is by the props that it receives to change, or by using component state via useState.
I'll write this imaginary piece of code to illustrate my point:
import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'
// ...
const LoginPage = _props {
const [token, setToken] = useState(localStorage.getItem('token'))
if (token) {
return <Redirect to='/' />
}
// I have no idea how you login your users
return (
<div>
<LoginForm onToken={setToken} />
</div>
)
}
If you need component A to react to changes done by component B, where neither of them is a direct child of the other, you will need global state.
Global state is similar to component state in that changes on it should trigger a re-render on the component that depends on it. But it is global, not local to a particular component.
To achieve this, there are complex solutions like redux, but you can implement a very simple version of it using a React Context:
// src/providers/GlobalStateProvider.js
import React, { createContext, useContext, useState } from 'react'
const Context = createContext()
const GlobalStateProvider = ({ children }) => {
const [token, doSetToken] = useState(localStorage.getItem('token'))
const setToken = t => {
doSetToken(t)
localStorage.setItem('token', token)
}
return (
<Context.Provider value={{ token, setToken }}>
{children}
</Context>
)
}
export { Context }
export default GlobalStateProvider
// src/App.js
import GlobalStateProvider from './providers/GlobalStateProvider'
// ...
const App = _props => {
return (
{/* Any component that is descendant of this one can access the context values, an will re-render if they change */}
<GlobalStateProvider>
{/* ... the rest of your components */}
</GlobalStateProvider>
)
}
// ...
// your particular component
import React, { useContext } from 'react'
import { Context } from 'path/to/GlobalStateProvider'
const SomeComponent = _props => {
// Component will re-render if token changes
// you can change token from wherever by using `setToken`
const { token, setToken } = useContext(Context)
if (token) {
// do this
} else {
// do that
}
}