React js redirect does not redirect to new url

user_12168002 0
Viewed 881

I am new to React js and started implementing in my one of the project for practice.

What I want when a user logged in then It should be redirected to another route which will render another component.

For redirecting I am using Redirect component from react-router-dom but it doesn't seems to work for me. If I use props.history.push() then it works.

I want clarity on

  • In what situation Redirect works?
  • When should I use Redirect and when props.history.push()?

Here is my codesandbox demonstration.

https://codesandbox.io/embed/react-protected-routes-n587m?fontsize=14&hidenavigation=1&theme=dark

react-router reactjs
2 Answers

Redirect component needs to be rendered to be effective and the returned value from event handlers is not rendered or in general not being used

If you wish to redirect or change route inside event handlers you need to use history.push

export const LandingPage = props => {
  return (
    <div>
      <h1>Landing Page</h1>
      <button
        onClick={() => {
          auth.login(() => {
             props.history.push("/app")
          });
        }}
      >
        Login
      </button>
    </div>
  );
};

Redirect can be used when you update a state and based on the presence of state, you could render the Redirect component like

return loggedIn && <Redirect to="/app" />
user_59281860

Welcome to react js!, it seems like you are trying to load Redirect as if it were a function, but it's not a function! it is a React Component!! More infromation about react components: react documentation or ww3Schools.

Redirect works when you want to change the Web Site direction (as you were trying to do it), but you have to use it as a component.

You should use props.history.push() when you are using the history in one of the children of your components, but both work similar, as you can see is hard to define when you should use it because they do the similar things, some people don't care about it, but if you want to know more check this post StackOverflow: In React is it always better to render a Redirect than use this.props.history.push?

About your code, be careful with the version that you are using in react, because in React 16.8 there is a feature to use react hooks and use functional components as a react component is pretty interesting, in your case you can't control the state of the element with out using React.memo but i prefer to use React components in this case you can use something like this:

Your landing page.js

import auth from "./auth";
import { Redirect } from "react-router-dom";

export class LandingPage extends Component {
    constructor(props){
      super(props);
      this.state = {
        authenticated: false
      };
    }

    render(){

    return (
      <div>
        {this.state.authenticated ? (<Redirect to="/app" />) : null}
        <h1>Landing Page</h1>
        <button
          onClick={() => {
            return this.setState({ authenticated: auth.login()})
          }}
        >
          Login
        </button>
      </div>
      );
    }
}

Your auth.js

class Auth {
  constructor() {
    this.authenticated = false;
  }

  login() {
    return this.authenticated = true;
  }

  logout() {
    return this.authenticated = false;
  }

  isAuthenticated() {
    return this.authenticated;
  }
}

export default new Auth();
user_95417150
Related