Programatically redirect user to another page ReactJS

Question

I want to programatically redirect the user to a loading page while I await for a response from the server api. I'm trying to do this inside a class component

The code I've got looks more or less like this:

class App extends Component { 
    constructor(props){
        super(props);
    }

    handleSubmit = () => {
      useNavigate("/loading")
      }
    }
    render() { 
      return ( 
        <div>
          <button onClick={this.handleSubmit}>
            Upload! 
          </button>
        </div>
      ); 
    } 
  }

export default App;

The thing is that nothing happens when i click the "Upload!" button. I've read that useNavigate cannot be used inside a class component but I'm not sure how I could implement this differently.

I guess my question is, how can I use useNavigate inside a class component?

EDIT: Thanks for your responses. I finally decided to convert my code to a function using these steps: https://nimblewebdeveloper.com/blog/convert-react-class-to-function-component

It now works like a charm.

score 0 · Answer 1 · answered Jan 27 '22 at 12:03

0

Your clarification is correct, useNavigate() is a hook and therefore can only be used in a functional component. I'm thinking as an alternative you can wrap your App with withRouter, a HOC that gives the wrapping component access to the match, location, and history objects. From there, you can update the location with history.push('/loading').

Please see here for more information on history.

answered Jan 27 '22 at 12:03

qslabs

216
2
8

OP is likely using `react-router-dom` v6 which eliminated the route props ***and*** the `withRouter` HOC. – Drew Reese Jan 27 '22 at 16:56

score 0 · Answer 2 · answered Jan 27 '22 at 12:04

0

You cannot use useNavigate which is a react hook inside of class component.

you can by the way use react-router-dom which provide different way to manipulate browser url.

answered Jan 27 '22 at 12:04

Yves Kipondo

4,832
1
17
26

sid · Answer 3 · 2022-01-27T13:23:56.137

Create a functional component as a Wrapper

import { useNavigate } from 'react-router-dom';

export const withRouter = (ClassComponent) => {
    const RouterWrapper = (props) => {
        const navigate = useNavigate();

        return (
                <ClassComponent
                    navigate={navigate}
                    {...props}
                />
            );
        };

    return RouterWrapper;
};

Then in your App.js, export it by wraping with the functional component

import { withRouter } from './wrapper';

class App extends Component {
    constructor(props){
        super(props);
    }

    handleSubmit = () => {
        useNavigate("/loading")
    }

    render() { 
        return ( 
            <div>
                <button onClick={this.handleSubmit}>
                    Upload! 
                </button>
            </div>
        ); 
    } 
}

export default withRouter(App);

Programatically redirect user to another page ReactJS

3 Answers3