Export ‘WithRouter’ is not exported from ‘react-router-dom’

This is a very common error on react-router-dom v6, Because of withRouter not working anymore on this version. With useNavigate it’s very easy to solve it.

But has one other issue, which is useNavigate will not work if the class component. That’s why we use these tricks to make it work bt the code/method. May you can follow this to solve this quickly.

import React from "react";
import { connect } from "react-redux";
import {useNavigate} from "react-router-dom";


// This is the main Class component
class AuthCheckingDtl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    forceLogin = () => {
        this.props.navigate("login");
    };
    render() {
        return ( <h2 onClick={() => { this.forceLogin(); }}>Login Now</h2> );
    }
}

const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};

// Wrapping the main class with this functional component
function AuthChecking(props) {
    let navigate = useNavigate();
    return <AuthCheckingDtl {...props} navigate={navigate} />
}


export default connect(mapStateToProps, mapDispatchToProps)(AuthChecking)