I try to understand what is the correct way to collect the history
in surfing around the SPA website in React with react-router-dom
.
I need to make many redirections inside my app, and it's work good with <Redirect/>
component of react-router-dom
. But it does not collect the history
info propely, because I have an opportunity to click back button on my arrows in browser, but they redirect me on some other pages of website, insted of previous... Why?
Also I saw from this post Redirect in react-router-dom? that the correct way is to use the this.props.history.push('/path1')
- but I cannot understand how to implement it in the my app. Help someone me, please...
So I have the next App.js:
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Auth from './Auth/Auth';
import RegistrationPage from './Auth/RegistrationPage';
import LogoutPage from './Auth/LogoutPage'
import EmployersBox from './Employers/EmployersBox';
import NotFoundPage from './NotFoundPage'
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/auth/login" component={Auth} />
<Route path="/auth/registration" component={RegistrationPage} />
<Route path="/auth/logout" component={LogoutPage} />
<Route path="/employers" render={(props) => <EmployersBox {...props} />
<Route path="" component={NotFoundPage} />
</Switch>
</div>
</Router>
)
}
}
export default App;
and or example Logout.js component:
//....Container:
render() {
if (this.state.navigateEmployers) {
return <Redirect to="/employers" />
} else if (this.state.navigateAuth) {
return <Redirect to="/auth/login" />
}
return (
<Fragment>
<Header/>
<div className="employers-logout col-lg-9 mx-auto d-flex flex-column justify-content-center text-center align-items-center">
<div className="employers-logout-text">
<h1>You succeessfully logouted!</h1>
<p>You will be redirected to the main page shortly</p>
</div>
<div className="employers-logout-buttons d-flex row align-items-center align-middle justify-content-between">
<p>Manual redirection</p>
<button className="btn btn-success mr-2" onClick={this.handleClick}>Go now</button>
</div>
</div>
<Footer/>
</Fragment>
)
}
}
export default LogoutPage;