如何在反应中发送动态道具

Question

<Route exact path="/product/:id" element={<ProductPage />} prod_id={this.id}/>

这里我有一条路线，我的意图是在我的组件中获取路径的 ID，以便我可以触发该功能并获取产品的详细信息显然 prod_id={this.id} 对我不起作用，也应该不起作用写这篇文章只是为了展示我的想法

一旦我在我的组件中获得这个 ID，我就可以触发这个功能

export const getSingle=(id) => async(dispatch)=>{
    try {
        dispatch({type:SINGLE_PRODUCT_REQUEST})
        const {data} = await axios.get(`/api/v1/products/detail:${id}`)
        dispatch({
            type:SINGLE_PRODUCT_SUCCESS,
            payload:data,
        })
    } catch (error) {
        
        dispatch({
            type:SINGLE_PRODUCT_FAIL,
            payload:error.response.data.message,
        })
    }

}

获取产品详细信息并填写必填字段

Answer 1

你可以从 useParams() 挂钩中获得 id。

路线代码

<Route exact path="/product/:id" element={<ProductPage />} />

在 React 组件中，从 react-router-dom 导入 useParams 钩子并使用

获取 ID

let { id } = useParams();

Answer 2

您不能将 props 传递给 Route 并在目标组件中访问它们。这不是 React 中的工作方式。

如果你想从 URL 访问参数，你可以使用钩子 - useParams()

    export const getSingle= () => async(dispatch)=>{
    try {
        dispatch({type:SINGLE_PRODUCT_REQUEST})
        const params: { id: string } = useParams();
        const {data} = await axios.get(`/api/v1/products/detail:${params.id}`)
        dispatch({
            type:SINGLE_PRODUCT_SUCCESS,
            payload:data,
        })
    } catch (error) {
        
        dispatch({
            type:SINGLE_PRODUCT_FAIL,
            payload:error.response.data.message,
        })
    }

}

对于非功能性组件，您必须从 props 访问参数

  class Example extends Component {
    render() {
        const { id } = this.props.match.params;
        return (
            <div>ID : { id }</div>
        );
    }
}

如何在反应中发送动态道具

how to send dynamic props in react

javascript

reactjs

react-redux

react-hooks