WithRouter

Чтобы получить параметр из урла, например, последние цифры из http://localhost:3000/profile/23, нам нужно:

  1.  Обернуть контейнерную компоненту в еще одну контейнерную и конектить уже потом ее:
let WithUrlDataContainerComponent = withRouter(ProfileContainer);

export default connect(mapStateToProps, {setUserProfile}) (WithUrlDataContainerComponent);
  1. А также указать сам параметр, что делается внутри Route – там, где мы указывали ссылку на эту страницу (в данном случае это строка из App.js):
<Route path='/profile/:userId?' render={ () => <ProfileContainer /> } />

Т.е. сам параметр указывается после двоеточия и ему присваивается произвольное название. Может быть несколько параметров сразу с разными названиями, указанных аналогичным путем. Например: /profile/:userId?/:location?

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

Как достать параметр?

Параметр попадает в пропсы. Достать его можно примерно так в классовой компоненте:

class ProfileContainer extends React.Component {

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

Обратите внимание, что через If указываем условие, что делать, если параметра нет. А то в некоторых случаях возникнет ошибка (точнее некорректная работа), ведь значение у переменной underfined.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *