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()。前-这是您的网址-http://localhost:8000/personal/1。

因此，您可以使用const { id } = useParams()

，然后，当您执行console.log(id)时，它将为您提供url的确切ID。在这种情况下，它将给您1。

useParams（）从网址中提取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对象呢？

假设您位于网址为http://localhost:8000/personal/1的页面上

window.location.href会给http://localhost:8000/personal/1

window.location.pathname会给/personal/1

拥有pathname或href后，就可以使用split(...)之类的常规字符串函数并获取ID。

Answer 4

如果您在前端使用React，最好使用rect-router。这样，您可以轻松操纵路径参数，并使用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的好库来解析它们。当然，如果您使用的是路径名，则需要手动删除参数。

Answer 5

在类组件中，您可以通过添加 constructor 来访问 ID，然后从 props 访问 ID，例如

export class PostDetail extends React.Component {
  
  constructor(props) {
    super(props);
    console.log(this.props.match.params.id)
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  render(){
    return(<h1>Post Detail</h1>);
  }
}

从react.js中的URL获取ID

5 个答案: