history in react router code example

Example 1: react router dom push

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <Button type="button" onClick={handleClick}>
      Go home
    </Button>
  );
}

Example 2: use history in react router

import {createBrowserHistory} from 'history';import {useRouterHistory, Router, Route} from 'react-router';const history = useRouterHistory(createBrowserHistory)({  basename: '/basename'});history.listen(location => {  history.push('/super/url');});const router = (  <Router history={history}>    <Route path=’/' component={App}>      …    </Route>  </Router>);

Example 3: history react router

history.push(
			`/product?make=${car_make_id}&model=${car_model_id}&year=${car_generation_id}&series=${car_serie_id}&engine=${car_trim_id}&variant=${car_equipment_id}`
		);

Example 4: props history

class Comp extends React.Component {
  componentDidUpdate(prevProps) {
    // will be true
    const locationChanged =
      this.props.location !== prevProps.location;

    // INCORRECT, will *always* be false because history is mutable.
    const locationChanged =
      this.props.history.location !== prevProps.history.location;
  }
}

<Route component={Comp} />;

Example 5: props history

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Example 6: history of react js

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}