получить идентификатор из url-адреса в react.js
я просто хочу сделать запрос Ajax для извлечения данных из API в REACT.JS, но каждый API нужен (id), я хочу получить этот идентификатор из URL-адреса в браузере, как я могу это сделать? это мой код.:
componentDidMount(){
fetch("http://localhost:8000/personal/1")
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
information: json,
})
})
я делаю API с помощью Laravel, и все это хорошо работает с этим кодом выше, но, как я уже сказал, Я хочу получить идентификатор из url в браузере, а не просто написать его, как сейчас, спасибо :) }
Ответы - получить идентификатор из url-адреса в react.js / get id from url in react.js
10.08.2019 08:26:45
Подход № 1
Вы можете использовать опору history от react-router-dom, вот ссылка, которая подробно объясняет, как это сделать,
https://tylermcginnis.com/react-router-programmatically-navigate/
Подход № 2
Если вы хотите сделать его супер простым, то как насчет использования объекта window.location?
Предположим, вы находитесь на странице с url-адресом http://localhost:8000/personal/1
window.location.href бы дать http://localhost:8000/personal/1
window.location.pathname бы дать /personal/1
Как только у вас есть pathname или href, вы можете использовать свои обычные строковые функции, такие как react-router-dom0, и получить идентификатор.
10.08.2019 08:44:13
Лучше использовать прямоугольник-маршрутизатор , если вы используете реагируют на переднем конце. Таким образом, вы можете легко манипулировать параметрами пути и получать к ним доступ в своих компонентах с помощью match.params.[paramName].
Используя обычный js, вы можете использовать объект window.location.
http://localhost:8000/personal/1 => window.location.pathname = personal/1[параметры пути]http://localhost:8000/personal?id=1 => window.location.search = ?id=1[параметры поиска]
Если вы используете параметры поиска, то для их анализа есть хорошая библиотека под названием query-string. И конечно, если вы используете имя пути, вам нужно будет вручную удалить ваши параметры.
07.10.2020 09:47:27
В React Hooks вы должны использовать useParams().
ex - это Ваш url - адрес-http://localhost:8000/personal/1.
Так что в этом случае вы можете использовать const { id } = useParams()
и после этого, когда вы сделаете console.log(id), он даст вам точный идентификатор url-адреса. в этом случае он даст вам 1.
useParams() извлекает идентификатор из url-адреса и позволяет пользователю использовать его.
Спасибо.