Question 49616 in Javascript Question posted in
A very good W3school tutorial can be found here.

react router push isn't redirecting to Home component – Javascript

My react router push isn’t redirecting to Home component, while I’m passing with props the Home path. It seems that the code is correct though.

https://codesandbox.io/s/react-router-example-forked-rmfn5j?file=/src/components/UserDetails.js:0-526

import React, { Component } from "react";

const ErrorLogin = () => {
  let back = () => {
    this.props.history.push("/");
  };

  return (
    <div className="wrapper">
      <h1>Error</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
      </p>
      <button onClick={() => back()}>Back</button>
    </div>
  );
};

export default ErrorLogin;
Tags:

3

Answers


  1. 0

    Are the props passed down the component? and also don’t you need to have props in component parameters arguments?

    const ErrorLogin = (props) => {
let back = () => {
 this.props.history.push("/");
 };
  }
    Login or Signup to reply.
  2. 0

    You can use useHistory hook if you want to use function components.

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

export const ErrorLogin = () => {
  const history = useHistory();
  let back = () => {
    history.push("/");
  };
  return (
    <div className="wrapper">
      <h1>Error</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
      </p>
      <button onClick={() => back()}>Back</button>
    </div>
  );
};
    Login or Signup to reply.
  3. 0

    You’re mixing up React class components and function components. Your example is trying to get the props as you would from a class component, in a function component. To use React router in function components, you need to use the hooks API – in this case, useHistory.

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

export const ErrorLogin = () => {
  const history = useHistory();
  let back = () => {
    history.push("/");
  };
  return (
    <div className="wrapper">
      <h1>Error</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
      </p>
      <button onClick={() => back()}>Back</button>
    </div>
  );
};

    For completeness’ sake, here’s the equivalent using the class syntax. Note the withRouter HOC.

    import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class ErrorLogin extends Component {
  back = () => {
    this.props.history.push("/");
  };
  render() {
    return (
      <div className="wrapper">
        <h1>Error</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris
        </p>
        <button onClick={() => this.back()}>Back</button>
      </div>
    );
  }
}

export default withRouter(ErrorLogin);

    Please note that you should probably be using function components going forwards. React router v6 doesn’t support class components and the larger React ecosystem is moving away from them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search