How to correctly implement withRouter in the realities of [email protected] and [email protected]?

Question

React

In a version less than react-router-dom and react-router there is less withRouter
and in order to read the value of userId you can do this

ProfileContainer.jsx

import {withRouter} from "react-router-dom"

class ProfileContainer extents React.Component{

componentDidMount(){
       let userId = this.props.match.params.userId;
        if (!userId){
         userId=20771;
        }
        axios.get(`https://social-network.samuraijs.com/api/1.0/profile/`+userId)
            .then(response => {
                // debugger;
                this.props.setUserProfile(response.data);
            });
}

}
let WithUrlDataContainerComponent = withRouter(ProfileContainer);

app.js

<Route path='/profile/:userId'
           render={ () => <ProfileContainer /> } />

BUT in version 6

import error: 'withRouter' is not exported from 'react-router-dom'

how best to solve this problem?

Answer 1

• useParams
  
• Migration from v5 to v6
  

Answer 2

ProfileContainer.js

import React from "react";
import Profile from "./Profile";
import * as axios from "axios";
import {setUserProfile} from "../../redux/profile-reducer";
import {connect} from 'react-redux';
import {useParams} from "react-router-dom";

const withRouter = WrappedComponent => props => {
    const params = useParams();
    // etc... other react-router-dom v6 hooks
    return (
        <WrappedComponent
            {...props}
            params={params}
            // etc...
        />
    );
};

class ProfileContainer extends React.Component{
    componentDidMount() {
        // debugger;
        //
        console.log(this.props);
        let userId = this.props.params.userId;
        if (!userId){
            userId=2;
        }
        axios.get(`https://social-network.samuraijs.com/api/1.0/profile/`+userId)
            .then(response => {
                // debugger;
                this.props.setUserProfile(response.data);
            });
    }
    render () {
    // debugger;
    return(
<Profile {...this.props}  profile={this.props.profile}/>
    )
  }
}

let mapStateToProps = (state) => ({
    profile: state.profilePage.profile
});

let WithUrlDataContainerComponent = withRouter(ProfileContainer);

export default connect(mapStateToProps, {
    setUserProfile
}) (WithUrlDataContainerComponent);

app.js

<Route path="/profile" element={<ProfileContainer />}>
        <Route path=":userId" element={<ProfileContainer />} />
      </Route>

it works 100% but not the best way and needs to be done differently but I'm solving a particular problem - I need to finish the job in the paradigm of IT React Kamasutra version 2019