从 react.js 中的 url 获取 id

Question

我只想让 Ajax 请求从 REACT.JS 中的 API 获取数据，但是每个 API 都需要（id），我想从浏览器中的 URL 获取该 id，我该怎么做？这是我的代码：

componentDidMount(){
fetch("http://localhost:8000/personal/1")
.then(res => res.json())
.then(json => {
    this.setState({
        isLoaded: true,
        information: json,
    })
})

我通过 Laravel 制作了 API，并且上面这段代码的一切都很好，但正如我所说，我想从浏览器中的 url 获取 id，而不仅仅是像现在这样写，谢谢:) }

Answer 1

在 React Hooks 中，你应该使用useParams(). ex - 这是你的网址 - http://localhost:8000/personal/1。

所以在这种情况下，使用 const { id } = useParams()

现在，如果您这样做console.log(id)，它将为您提供网址的确切 ID。在这种情况下，它会给你 1。

useParams() 从 url 中提取 id 并让我们使用它。

谢谢。

Answer 2

在您的路由中，您可以指定一个参数，然后使用 useParams 获取该参数。

// App.js
<Route path='/post/:id' component={PostDetail} />

// Single post component
import axios from "axios";    
import { useState, useEffect } from "react"
import { useParams } from "react-router-dom";

// Get ID from URL
const params = useParams();
    
    const [posts, setPosts] = useState([])
    
        useEffect(()=> {
            axios.get(`http://localhost:5000/posts/${params.id}`)
            .then(res => {
                console.log(res)
                setPosts(res.data)
            })
            .catch(err =>{
                console.log(err)
            })
        }, [params.id])

从那时起，您可以在组件中使用 {post.yourdata}。

Answer 3

方法#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你可以使用你的常规字符串函数，比如split(...)并获取 ID。

Answer 4

首先在您的导航文件（如 app.js 或 navigation.js）中添加此路线

<Route path="/home/:id"  element={<Landing />} />

比在登陆屏幕或页面上使用此代码来获取该值

  const params = useParams()
  console.log(params)