Как правильно реализовать withRouter в реалях react-router-dom@6.0.2 и react-router@6.0.2?

Question

[Николай Бараненко]

В версии меньше react-router-dom и react-router меньше есть withRouter
и для того чтобы считывать значение userId можно поступить так

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 /> } />

НО в версии от 6

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

как лучше решить эту проблему?

Comments

[Алексей Абрамов]

С версии 6.0(вообще с 5.1) теперь нужно использовать хуки.

Answer 1

[Николай Бараненко]

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>

это 100% работает но не самый лучший способ и нужно делать по-другому но я решаю частную задачу - нужно доделать работу в парадигме IT React Kamasutra версии 2019 года

Comments

[Александр Волков]

Спасибо, работает

[Семён Крекотун]

спасибо)))

Answer 2

[Александр]

• useParams
  
• Миграция с v5 на v6
  

Comments

[Николай Бараненко]

благодарю за ответ, но мне реально помогло

React-router-v6 access a url parameter

на ваш взгляд - это реальный костыль React?

[Александр]

Николай Бараненко, Не знаю зачем использовать старый API или подражать ему, когда придумали более удобный способ.