Добрый вечер!
Дайте совет по реализации, пожалуйста.
Есть компонент "Cars", там вы можете выбрать "BMW", "Mercedes-Benz" и "Audi". После выбора открывается компонент Car. Он выглядел следующим образом:
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import Vimeo from '@u-wave/react-vimeo'
class Car extends Component {
constructor(props) {
super(props);
this.state = { car: {contents: []} };
}
componentDidMount() {
const carId = this.props.match.params.slug
axios.get(`/api/car/${carId}`).then(response => {
this.setState({ car: response.data })
})
}
render() {
const car = this.state.car
return (
<div className="container-fluid">
<div className="row justify-content-around">
<div className="col-4">
<h1>{car.title}</h1>
<hr/>
<ul>
{car.contents.map(content => <li key={content.id}><Link to={`/content/${content.slug}`}>{content.title}</Link></li>)}
</ul>
</div>
<div className="col-8 vimeo_container">
<Vimeo video="23804756" id="vimeo_player"/>
</div>
</div>
</div>
)
}
}
export default Car
При выборе определенной марки справа в меню выводится видео по машинам, например "BMW".
При клике на одну из видео, ссылка меняется (bmw-video-1).
Вопрос: Если выбор происходит на этом же компоненте, как реализовать обновление данных? Нужно ведь после клика на ссылку одного из видео(контента) изменить заголовок и id видео для проигрывания. Как это грамотно реализовать? Неужели написать обработчик event на onChangeURL?
Заранее спасибо!