Geek Answers Handbook

ComponentDidMount does not work after calling browserHistory.push ("/ url")

I have a problem where I send the user to the react router route after logging in based on the following:

        ...
        //check login
        browserHistory.push(self.props.destination_url);

I was expecting to start componentDidMount, since this component has not been displayed on the screen since the application was downloaded, but will not. If I click the link to it (the link of the responsive router) in the navigation bar, componentDidMountit will start.

I just need to make an API call when this component appears on the screen due to browserHistory.push(self.props.destination_url);a route change. I tried things like

<Router createElement={ (component, props) =>
{
  const { location } = props
  const key = '${location.pathname}${location.search}'
  props = { ...props, key }
  return React.createElement(component, props)
} }/>

here the component is not remounted when changing the route parameters and does not work.

http://busypeoples.imtqy.com/post/react-component-lifecycle/ " ", " ", " " " ". , . , push- browserHistory?

, componentWillUpdate browserHistory.push , . , , , :

componentWillUpdate() {
    console.log('it ran componentWillUpdate');
    if (this.props.email) {

        console.log('firing off /api/userInfo');
        let self = this;
        axios.post('/api/userInfo', {email: this.props.email})
          .then(function (response) {
              let result = response.data.result;
              console.log('after calling /api/userInfo');
              console.log(response);
              console.log(result);
              if (result) {
                  self.setState({restaurant_profile: result});
              }
          })
          .catch(function (error) {
              console.log("Something went wrong trying to check for a user restaurant profile");
              console.log(error);
          });
    }
}

/ POST, :

Executing (default): SELECT 'id', 'email', 'password', 'RestaurantId' FROM 'Users' AS 'User' WHERE 'User'.'email' = 'fake@fake.com' LIMIT 1;

Executing (default): SELECT 'id', 'email', 'password', 'RestaurantId' FROM 'Users' AS 'User' WHERE 'User'.'email' = 'fake@fake.com' LIMIT 1;

Executing (default): SELECT 'id', 'email', 'password', 'RestaurantId' FROM 'Users' AS 'User' WHERE 'User'.'email' = 'fake@fake.com' LIMIT 1;

Executing (default): SELECT 'id', 'email', 'password', 'RestaurantId' FROM 'Users' AS 'User' WHERE 'User'.'email' = 'fake@fake.com' LIMIT 1;

...

, . , ,

r

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^3.0.5",
"react-router-dom": "^4.2.2",
"react-transform-hmr": "^1.0.4",
"redux": "^3.7.2",


import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { Router, Route, Link, IndexRoute, browserHistory } from "react-router";

import reducers from "./reducers";
import { loadConfig, getConfig } from "./config";
import Nav from "./Nav";
import LoginPage from "./containers/LoginPage";
import MapShowRestaurants from "./components/MapShowRestaurants";
import RestaurantRegistration from "./containers/RestaurantRegistration";


const createStoreWithMiddleware = applyMiddleware()(createStore);


getConfig.then((config) => {
    loadConfig(config);

    ReactDOM.render(
        (
            <Provider store={createStoreWithMiddleware(reducers)}>
                <Router history={browserHistory}>
                    <Route path="/" component={Nav}>
                        <IndexRoute component={MapShowRestaurants} />
                        <Route path="/login" component={LoginPage} />
                        <Route path="/registerRestaurant" component={RestaurantRegistration} />
                    </Route>
                </Router>
            </Provider>
        ), document.querySelector('.container'));
})
.catch((err) => {
    console.log(err);
})
+11
2

API .

function getUserInfo(payload) {
  // do axios
  return { 
      type: 'GET_USER_INFO',
      payload: result_of_your_api_call,
      error: false/true
  };
}

matStateToProps mapDispatchToProps

connect(mapStateToProps, mapDispatchToProps)(YourMagicComponent)

. , , http://redux.js.org/docs/basics/ExampleTodoList.html

1. , , defaultProps. 2. componentDidMount ( , ) 3. - WillUpdate,

componentWillUpdate(nextProps) {
  this.setState(key: nextProps.key)
}

shouldComponentUpdate(nextProps, nextState) {
  // fix for your update
  if (this.state.key !== nextProps.key) {
     return true;
  }
}
+4

@codyc4321 self.props.router.push('/url')

+2

More articles:


All Articles