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

вопрос создан в Thu, May 2, 2019 12:00 AM

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

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

Я настроил маршрут с компонентом path = "/detailView /" = {DetailView} и методом onSelect (), который обновляет состояние с помощью текущего элемента li, выбранного с помощью this.setState (state = &gt). ; ({имя: запись.имя})). 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)

    
0
1 ответ                              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)
}

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

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

    
0
2019-05-02 15: 35: 20Z
  1. Привет, Алисия. Спасибо за попытку помочь :). К сожалению, это неправильно отображает компонент. Мне нужно, чтобы новая страница была в иерархии истории, чтобы вы могли переходить туда-сюда. То, как я настроил маршруты, может быть совершенно неверным. Есть ли способ изолировать компоненты, чтобы они могли отображать контент в зависимости от того, какой элемент был выбран? В настоящее время это настройка, в которой результаты и подробный вид отображаются на одной странице.
    2019-05-02 15: 59: 17Z
  2. Я хотел бы помочь, но я не уверен, что понимаю, что вы имеете в виду? Для истории, если все работает правильно, React-router должен обновить его с помощью щелчка мышью. Если вам нужны отдельные компоненты, вам нужно иметь свой маршрутизатор в качестве компонента обертки более высокого уровня для вашего приложения. Чтобы отобразить только один элемент, посмотрите 2019-05-03 06: 47: 47Z
  3. <Router > <Switch> <Route exact path="/error" component={Error419}/> <App> <Switch> <Route exact path="/home" component={Home} /> <Route exact path="/planning" component={Planning} /> <Route path="/ticket/:key" component={Ticket} /> </Switch> </App> </Switch> </ConnectedRouter>
    2019-05-03 06: 49: 15Z
  4. Затем в приложении у меня есть div, который отображает TopBar (который всегда печатается, за исключением страницы Error419), а затем {this.props.children}. Это моя установка, и когда я работаю над ссылкой, печатается правильный Билет, поэтому он сможет работать, если вы сможете идентифицировать свой конкретный элемент с /id в компоненте Ссылка.
    2019-05-03 06: 52: 20Z
источник размещен Вот