получить идентификатор из url-адреса в react.js


получить идентификатор из url-адреса в react.js

10.08.2019 08:19:47 Просмотров 8 Источник

я просто хочу сделать запрос 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

Является ответом!
Ramaraja Ramanujan

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, и получить идентификатор.

Anuja

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. И конечно, если вы используете имя пути, вам нужно будет вручную удалить ваши параметры.

Abnish

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-адреса и позволяет пользователю использовать его.

Спасибо.

Помочь в развитии проекта:
Закрыть X