Попытка направить каждый элемент li к компоненту, который отображает подробную страницу элемента

Question

Я получаю данные из конечной точки и пытаюсь создать маршруты для каждого отдельного элемента li.В настоящее время он отображает данные, но у меня возникают проблемы при переходе на другую страницу, когда я выбираю элемент li.

Где можно настроить маршрут для каждого элемента, чтобы при выборе li с помощью метода onClick я мог перейти на совершенно другую страницу, на которой показан компонент с выбранными текущими данными, аналогичный коммерческому веб-сайту, отображающемувсе элементы и переходит на подробный экран при выборе?Предыдущий список кроссовок не должен быть виден, когда я перехожу на новую страницу, и должен быть отдельным компонентом целиком.

Я настроил маршрут, который имеет путь = "/ detailView /"component = {DetailView} и имеют метод onSelect (), который обновляет состояние с помощью текущего элемента li, выбранного с помощью this.setState (state => ({name: entry.name})).this.props.history.push закомментирован, так как он выталкивает пустую страницу без настройки компонента.

введите описание изображения здесь В настоящее время способ отображения страницы.

class Api extends Component {

    componentDidMount() {
        const url = 'https://yawndry-heroku.herokuapp.com/sneakers'

        fetch(url)
            .then(result => result.json())
            .then(result => {
                this.setState({
                    data: result
                })
            })
    }


    onSelect(entry) {
        let path = entry.name


        console.log(entry.name)

        this.setState(state => ({
            name : path
        }))
        // this.props.history.push('/detailView/')
    }

    render() {

        const {data} = this.state
        const result = data.map((entry, index) => {
            return <h3>
                       <li key={index} onClick={() => this.onSelect(entry)} >{entry.name} {entry.condition}</li>
                       <Link to="/detailView/" onClick={() => this.onSelect(entry)}>More Details</Link> 
                    </h3>
        })




        return <Router>
                    <Route exact path="/detailView/" 
                            render={(props) => <DetailView {...props} name={this.state.name}/>} />
                    <ul>{result}</ul>

                </Router>
    }

export default withRouter(Api)

Answer 1

У меня есть похожая вещь, когда мы отправляем пользователя на определенную страницу заявки при нажатии на заголовок. Вот как это настроено: у нас есть ссылка с путем и чем-то, что идентифицирует элемент

<Link to={`/detailView/id`} target={'_blank'}>

В роутере:

<Route path="/detailView/:key"  component={DetailView} />

В Компоненте у меня есть вызов к моему API, который извлекает данные:

componentDidMount() {
// Set title page
document.title = this.props.match.params.key;
//Retrieve the data
this.props.getAll(this.props.match.params.key)
}

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

Надеюсь, это поможет.