Добавление динамической ссылки

#reactjs #react-router

#reactjs #react-маршрутизатор

Вопрос:

Я хочу добавить новую ссылку следующим образом

Реагировать.Фрагмент 
 ключ li ={props.items.Плакат} img src={props.items.Плакат} alt={props.items.Заголовок} li 
 ключ li={props.items.Заголовок}>{props.items.Заголовок} li 
 ключ li={props.items.Год}>{props.items.Год} li 
 Реагировать.Фрагмент

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

Комментарии:

1. под реквизитами на другой странице вы подразумеваете передачу данных на другую страницу через параметры запроса?

2. Привет @DacreDenny да, давайте подумаем таким образом 🙂

Ответ №1:

Если я правильно понимаю, то вы могли бы достичь того, что вам требуется, выполнив что-то вроде этого:

 render() {

    /* Construct href from props data, pass data to new page via query string */
    const { items } = this.props;
    const url = 'someUrl';
    const href = `${ url }?title=${ items.Title }amp;year=${ items.Year }`;

    /* Wrap img with link and pass dynamically computed href */
    return <React.Fragment>
        <li key ={props.items.Poster}>
            <a href={ href }> 
                <img src={props.items.Poster} alt={props.items.Title}/>
            </a>
        </li>
        <li key={props.items.Title}>{props.items.Title}</li>
        <li key={props.items.Year}>{props.items.Year}</li>
    </React.Fragment>
}
  

Комментарии:

1. спасибо за предложение @Darce. что, если я захочу перенаправить на другой компонент вместе с параметрами запроса для использования в качестве реквизитов.

2. В подобной ситуации я бы предложил маршрутизацию на стороне клиента. Для react существует ряд хороших декларативных библиотек маршрутизации, таких как эта npmjs.com/package/react-router-dom

3. кто-нибудь может привести пример для вышеупомянутого сценария?

4. С помощью react-router-dom ?

5. конечно — можете ли вы включить подробную информацию о компоненте, который вы хотите, чтобы ссылка отображалась?