WithRouter
Чтобы получить параметр из урла, например, последние цифры из http://localhost:3000/profile/23
, нам нужно:
- Обернуть контейнерную компоненту в еще одну контейнерную и конектить уже потом ее:
let WithUrlDataContainerComponent = withRouter(ProfileContainer); export default connect(mapStateToProps, {setUserProfile}) (WithUrlDataContainerComponent);
- А также указать сам параметр, что делается внутри 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.