React-router-dom Link doesn't work when I click on it, but when I refresh the page, the required page appears. Also, after reloading the page, the token and the user are not saved.
For example, when clicking on the login link, nothing happens. The login form only appears after the page is reloaded. After pressing the login button, the server returns the token, but there is no transition to the event page. After reloading the page, the event page appears, but the token is lost
App.js looks like this
function App() {
const [user, setUser] = React.useState(null);
const [token, setToken] = React.useState(null);
const [error, setError] = React.useState('');
async function login(user = null) {
EventDataService.login(user)
.then(response => {
setToken(response.data.token);
setUser(user.username);
localStorage.setItem('token', response.data.token);
localStorage.setItem('user', user.username);
setError('');
})
.catch(e => {
setError(e.toString());
});
}
async function logout() {
setToken('');
setUser('');
localStorage.setItem('token', '');
localStorage.setItem('user', '');
}
async function signup(user = null) {
setUser(user);
EventDataService.signup(user)
.then(response => {
setToken(response.data.token);
setUser(user.username);
localStorage.setItem('token', response.data.token);
localStorage.setItem('user', user);
})
.catch( e => {
console.log(e);
setError(e.toString());
})
}
return (
<div className="App">
<header className="App-header">
<ul className="nav justify-content-center">
{
user ? (
<li className="nav-item">
<Link className="nav-link text-light" onClick={logout}>Logout ({user})</Link>
</li>
):(
<>
<li className="nav-item">
<Link className="nav-link text-light active" aria-current="page" to={"/login"}>Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link text-light" to={"/signup"}>Sign Up</Link>
</li>
</>
)}
</ul>
<h1
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Welcome { user ? user: '' }!
</h1>
</header>
<div className='container'>
<Switch>
<Route exact path={["/", "/events"]} render={(props) =>
// <EventList {...props} token={token} />
<EventsList {...props} token={token} />
}>
</Route>
<Route path="/login" render={(props)=>
<Login {...props} login={login} />
}>
</Route>
{/* <Route path="/login" render={(props)=>
<LoginForm {...props} login={login} />
}>
</Route> */}
<Route path="/signup" render={(props)=>
<Signup {...props} signup={signup} />
}>
</Route>
</Switch>
</div>
</div>
);
}
React-router-dom version 5.2.0 installed.
