1

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;
Max Wolfen
  • 1,523
  • 5
  • 15
  • 38

0 Answers0