Question

我正在尝试使用 react js 获取 url 参数。我的路线是

<Route exact path="/store/product-details/:id" component = {StoreProductDetails} />

ProductDetail.js

componentDidMount(){
      let id = this.props.match.params.id
      fetch(MyGlobleSetting.url + 'product/'+ id)
      .then(response => response.json())
      .then(json => this.setState({ singleProduct: json.data }));
    }

enter image description here

Answer 1

您可以使用 useParams 钩子或使用来自 react-router 的 withRouter HOC 包装基于类的组件。您可以在他们的 documentation 中看到一个示例。

使用功能组件

import React, {useEffect} from 'react';
import {useParams} from 'react-router-dom';

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  useEffect(() => {
     fetch(MyGlobleSetting.url + 'product/'+ id)
      .then(response => response.json())
      .then(json => this.setState({ singleProduct: json.data }));
  }, [])
}

使用类组件

import React, {Component} from 'react';
import { withRouter } from 'react-router-dom';

class myComponent extends Component {

  componentDidMount(){
     const {match} = this.props

     fetch(MyGlobleSetting.url + 'product/'+ match.params.id)
      .then(response => response.json())
      .then(json => this.setState({ singleProduct: json.data }));
  }
}

export default withRouter(Child);

React Js 从 URL 获取参数

1 个答案: