ReactJs this.props.history.push() is not working

ReactJs this.props.history.push() is not working

this.props.history.push not working in child component
this.props.history.push undefined
history.push react
history.push not rendering component
this.props.history.push example
this.props.history is undefined
this.props.history.push with state
this.props.history.push undefined react

i'm new with Reactjs and for some reasons i'm working on a small application for learning purpose.

I'm using react-router-dom to navigate between different components.

The idea is when the user click to logout, the App Component should detect the logout event inside the componentWillUpdate() method and then redirect the user to Login Component.

The error is:

Routes.js

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react- 
router-dom';
import Login from '../Components/LoginComponent/Login';
import AddNoteForm from "../Components/AddNoteForm";


const AppRouter = () => (
<BrowserRouter>
        <Switch>
            <Route path="/" component={AddNoteForm} exact={true} />
            <Route path="/login" component={Login} exact={true} />
        </Switch>
</BrowserRouter>
);

export default AppRouter;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './Redux/Store/ConfigureStore';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


const store = configureStore();


const jsx = (
<Provider store={store}>
    <MuiThemeProvider>
        <App />
    </MuiThemeProvider>
</Provider>
);

ReactDOM.render(jsx, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
import { Grid, Col, Row } from 'react-bootstrap';
import Navigation from "./Components/Navigation";
import AddNoteForm from "./Components/AddNoteForm";
import Clock from "./Components/Clock";
import { connect } from 'react-redux';
import AppRoutes from "./Routes/Routes";

class App extends Component {

constructor(props) {
super(props);
}
  componentWillUpdate(nextProps, nextState) {

if (nextProps.store.user.email === null || nextProps.store.user.email 
== undefined) {
  this.props.history.replace('/login');
}

 }


 render() {
 return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Welcome to this Learing React 
Application.</h1>
    </header>
    <div className="App-intro" >
      <Navigation></Navigation>
      <Grid>
        <Row className="show-grid">
          <AppRoutes />
        </Row>
      </Grid>
    </div>
  </div>
  );
 }
}

const mapStateToProps = (store) => {
  return { store };
};

export default connect(mapStateToProps)(App);

Package.json

    {
      "name": "first-react",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "install": "^0.11.0",
        "material-ui": "^0.20.0",
        "npm": "^6.0.0",
        "react": "^16.2.0",
        "react-bootstrap": "^0.32.1",
        "react-dom": "^16.2.0",
        "react-redux": "^5.0.7",
        "react-router-dom": "^4.2.2",
        "react-scripts": "1.1.1",
        "react-spinner": "^0.2.7",
        "react-spinners": "^0.3.2",
        "react-toastify": "^4.0.0-rc.5",
        "redux": "^4.0.0",
        "redux-thunk": "^2.2.0",
        "uuid": "^3.2.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }

Your App component is not being wrapped with BrowserRouter. You need to wrap it somewhat like this:

const Routes = () => (
    <Switch>
        <Route path="/" component={AddNoteForm} exact={true} />
        <Route path="/login" component={Login} exact={true} />
    </Switch>
);

const jsx = (
<Provider store={store}>
    <MuiThemeProvider> 
       <BrowserRouter>
         <div>
           <AppRouter />
           <Route component={App} />
         </div>
       <BrowserRouter>
    </MuiThemeProvider>
</Provider>
);

How to push to History in React Router v4?, browserHistory is not exposed by react-router in v4, only in v2. Use this.props.​history.push('/cart'); to redirect to cart page it will be saved in history object. Enjoy, Michael. this.context.history.push will not work. I managed to get push working​  reactjs - read - this.props.history.push not working browserHistory.push doesn't navigate to new page (2) I've set up browserHistory on a router with this (react-router 2.0):


In order to have the history in your props, you can use withRouter. Update the App.js file as follows:

import { withRouter } from 'react-router'

...

export default withRouter(connect(mapStateToProps)(App));

history.push not working when using BrowserRouter · Issue #4059 , browserHistory is not exposed by react-router in v4, only in v2. If you want the full history object you can also grab that off context like router . this. const {history } = this. props; history. push ("/thePath") In the same project and it worked as expected. Upon further experimentation and some comparing and contrasting, I realized that this code will not run if it is called within the nested component. Therefore only the rendered page component can call this function for it to work properly.


Please use https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md, you can just render component in App.js

 componentWillUpdate(nextProps, nextState) {

if (nextProps.store.user.email === null || nextProps.store.user.email 
== undefined) {
  return <Redirect to="/login" />
}

this.props.history.push not working in react - reactjs - html, Problem here is url is getting changed but component is not getting rendered. Couldn't understand this. browserHistory.push("/personalInfo"); This is how I am  history.push not working in some pages Would this function be enough. the line causing the issue is line 35 'this.props.history.push More posts from the


React-router v4 this.props.history.push(…) not working, So I came to this question hoping for an answer but to no avail. I have used const { history } = this.props; history.push("/thePath"). In the same  Creating a new browserHistory won't work because <BrowserRouter> creates its own history instance, and listens for changes on that. So a different instance will change the url but not update the <BrowserRouter>. browserHistory is not exposed by react-router in v4, only in v2.


Programmatically navigate with React Router, If it's not rendered by React Router, then we won't have access to history.push . The team thought of this use case so React Router comes with  If you’re going to work on the tutorial in your browser, open this code in a new tab: Starter Code. If you’re going to work on the tutorial locally, instead open src/index.js in your project folder (you have already touched this file during the setup). This Starter Code is the base of what we’re building.


Basics of React Router v4, to take out some hardcoded values of path and location. dominikbulaj changed the title react-router-redux push not forcing render component react-router-redux's push() not rendering new route Apr 6, 2017 This comment has been minimized. Sign in to view