How to change route from outside router component in React.js

Asked Nov 11 '17 at 12:47

Active Nov 11 '17 at 12:47

Viewed 684 times

I have created a route in React.js

<BrowserRouter>
    <div>
        <Header isLogged={this.state.isLoggedIn} userdata={this.props.userdata}/>
        <div className='container'>
          <Switch>
            <Route path="/" exact render={(props) => (<LoginPage handleLogIn={this.handleLogIn} alterLoginStatus={this.alterLoginStatus} {...props}/>)} />
            <Route path="/dashboard" exact component={DashboardPage}/>
              <Route path="/contact"  component={Contact}/>
              <Route component={PageNotFound} />
          </Switch>
        </div>
    </div>
</BrowserRouter>

In my Header component I have a button in navbar, upon which click I want to clear some localstorage and navigate to /login.

this.props.history.push('/login') is not working as I dont have access to router props inside Header component.

Please help me.

asked Nov 11 '17 at 12:47

raju

4,859
11
54
108

you can use browserHistory like : ``` browserHistory.push('/login') ``` and if you want to clear any localStorage then dispatch an action where you can clear localStorage and then navigate to /login route. – Osman Goni Nahid Nov 11 '17 at 12:51
'react-router-dom' does not contain an export named 'browserHistory'. How to import browserHistory – raju Nov 11 '17 at 12:55
import it from `react-router` – Osman Goni Nahid Nov 11 '17 at 12:57
I a using react-router-dom. Should i import react-router – raju Nov 11 '17 at 12:58
` import {browserHistory} from 'react-router' ` logout() { localStorage.removeItem('key'); this.props.logoutHard(); browserHistory.push('/login'); } – Osman Goni Nahid Nov 11 '17 at 12:59
'react-router' does not contain an export named 'browserHistory'. I am using react router-4 – raju Nov 11 '17 at 13:00

How to change route from outside router component in React.js

0 Answers0