React Router - Preserve current route after page refresh - reactjs

Question

I am new to SPA development. I use React and React Router and made simple app. It has two pages: public and protected. User can see protected page only when he was signed in. I use firebase for managing users.
The problem is when I go to protected page, log in and can see its content, I then resresh the page and redirected to "default" state which is public page.
index.js
ReactDOM.render(<App />, document.getElementById('root'));
App.js
const ProtectedPage = () => {
return (
<div>
<h1> Protected page. </h1>
<Link to="/">Public resources</Link>
</div>
);
}
const PublicPage = () => {
return (
<div>
<h1> Public page. </h1>
<p> Login to see protected resources </p>
<Link to="/protected">Protected resources</Link>
</div>
);
}
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
<Route {...rest} render={props => (
isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/',
state: { from: props.location }
}}/>
)
)}/>
)
class App extends React.Component {
constructor(props) {
super(props);
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.state = {
username: '',
uuid: ''
}
}
login() {
auth.signInWithEmailAndPassword(email, password).then((user) => {
console.log('Sign in ', user.displayName);
this.setState({
username: user.displayName,
uuid: user.uuid
});
});
}
logout() {
auth.signOut().then(() => {
console.log('Sign out ');
this.setState({
username: '',
uuid: ''
});
})
}
componentDidMount() {
this.releaseFirebaseAuthHandler = auth.onAuthStateChanged((user) => {
if(user) {
this.setState({
username: user.displayName,
uuid: user.uuid
});
}
});
}
componentWillUnmount() {
this.releaseFirebaseAuthHandler();
}
render() {
return (
<div>
<div className="navbar">
<nav className="navbar-nav">
{ this.state.username ?
<button onClick={this.logout}>Logout</button> :
<button onClick={this.login}>Login</button> }
</nav>
</div>
<div>
<div>
<Route exact path="/" component={PublicPage} />
<PrivateRoute path="/protected" component={ProtectedPage} isAuthenticated={this.state.uuid !== ''} />
</div>
</div>
</div>
);
}
}
export default App;
Is it possible to preserve localhost:3000/protected page after refreshing it without involving the server?

Answer 1

In your code you redirect to pathname: '/' if user is not authenticated:
const PrivateRoute = (...) => (
<Route {...rest} render={props => (
isAuthenticated
? <Component {...props}/>
: <Redirect to={{
pathname: '/',
state: { from: props.location }
}}/>
)}/>
)
If you would like to keep /protected in url one way to do it is to replace redirect with something like <div>Please login</div>

Answer 2

The state is not preserved across multiple sessions, for this purpose you can use the localStorage.