Получить параметры пути в response-router v4
Я пытаюсь построить канал маршрутизатора через мое приложение,
В этом случае у меня есть три файла.
App.js
- В чем разница между «$ (this)» и «this»?
- Как использовать API Web Speech при работе с хромом?
- Список переходов панели задач Putty, разбитый на Windows 10
- React не перезагружает данные компонента при изменении параметров маршрута или изменении запроса
- Замените места тире и сделайте все буквы в нижнем регистре
Book.js
DetailedView.js
У меня внутри книги создана которая появляется только при зависании (над обложкой книги)
{this.state.isHovered ? ( ) : ( )}
Это приведет меня к / детали / 12345 (номер isbn10)
То, что мне трудно понять, – это, например, setState({iPressedThisBook}) при нажатии или если я смогу использовать часть после /12345 для создания как фильтра
Потому что в App Route будет подключен как …
( )}/>
Я, позже, хочу захватить :id чтобы я сделал, например, this.props.book.find(:id) внутри моего
- Все мои браузеры внезапно не поддерживают файлы Javascript?
- Создание hashа из строки в Javascript
- Исправить div, когда браузер прокручивается до
- if-else внутри jsx: ReactJS
- Способы перебора списка в Java
- Внедрение переменной javascript перед скриптом содержимого
- Лучший способ суммировать значение свойства в массиве
- Перейти к локальному URL-адресу с помощью Javascript
Чтобы получить параметр path в вашем компоненте, вам нужно сначала подключить свой компонент с помощью withRouter HOC от react-router чтобы вы могли получить доступ к реквизитам маршрутизатора и получить параметры пути из реквизита соответствия, как this.props.match.params.id
Образец кода:
import {withRouter} from 'react-router'; class BookDetailedView extends React.Component { render() { var id = this.props.match.params.id } } export default withRouter(BookDetailedView) ;
или просто передать его с помощью рендеринга в маршруте, как
(
Из Реагирующей документации match
совпадение
Объект соответствия содержит информацию о том, как
соответствует URL. объекты соответствия содержат следующие свойства:
- params – (object) Пара ключей / значений, проанализированных по URL-адресу, соответствующему динамическим сегментам пути
- isExact – (boolean) true, если весь URL-адрес был сопоставлен (без конечных символов)
- path – (string) Путь к шаблону, используемый для сопоставления. Полезно для построения вложенных
- url – (строка) Соответствующая часть URL-адреса. Полезно для построения вложенных
У вас будут объекты сопоставления доступа в разных местах:
- Компонент маршрута как
this.props.match- Перенос маршрута как ({match}) => ()
- Маршрут детей как ({match}) => ()
- withRouter как this.props.match
- matchPath как возвращаемое значение
Если маршрут не имеет пути и поэтому всегда совпадает с ним, вы получите самое близкое родительское совпадение. То же самое происходит с Router
Вы можете получить доступ: id, выполнив this.props.params.id
вы можете обрабатывать маршрутизацию многими способами, вам не нужно делать то, что вы также можете обрабатывать в функции.
function doSomethingWhenClicked(id) { doSomething(); this.props.history.push({ pathname: '/example/'+id }); }