Javascript ReactJS-使用重定向组件传递道具

如何通过

重定向组件传递道具，而不让它们暴露在url中

像这样
您可以像这样使用浏览器历史状态：

<Redirect to={{
    pathname: '/order',
    state: { id: '123' }
}} />

<Redirect to={{
            pathname: '/order',
            state: { id: '123' }
        }}
/>



然后您可以通过
this.props.location.state.id访问它

来源：
您可以使用
重定向传递数据，如下所示：

<Redirect to={{
    pathname: '/order',
    state: { id: '123' }
}} />

<Redirect to={{
            pathname: '/order',
            state: { id: '123' }
        }}
/>

解释如何在重定向/历史属性中传递状态和其他变量

来源：

出于同样的目的，您可以自带钩子：

从“历史”导入{createBrowserHistory}；
const with refresh=createBrowserHistory（{forceRefresh:true}）；
const ROOT_PATH=process.env.PUBLIC_URL | |“/myapp”；
const useRedirectToAccounting=（params=“1”）=>{
如果（参数）{
使用refresh.push({
路径名：`${ROOT\u PATH}/create`，
状态：{id:`${params}`}
});
}
} 
导出默认重定向到会计；


然后像这样使用它：


从“.”导入用户EdirectToAccounting/redirectToAccounting
const handleOnClick=params=>useRedirectToAccounting（params）
常量重定向组件=（）=>{“标签”}

**这可以根据需要进一步重构
 您应该首先在App.js中定义的路线中传递道具

<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>



然后，您可以通过所需组件中的
this.props.location.state.id
访问它
@SakhiMansoor是的，对象应该包含
路径名
，
搜索
，
状态
，等等，这些都是浏览器历史记录使用的值。任何自定义值都应包含在向下一级的
状态
对象中。它更干净，将浏览器历史记录使用的内容与您自己的自定义对象分开。感谢@Anas和SakhiMansoor的帮助。你们都应该得到解决方案标记！：）@SakhiMansoor我尝试了相同的代码，但它给了我这个错误：Object literal可能只指定已知的属性，而'LocationDescriptor'类型中不存在'id'。这显然有效；你好我在接收通过重定向传递的状态参数时遇到了一些问题。这个.props.location给了我未定义的信息。有什么建议吗？这个.props.location给了我未定义的信息。有什么建议吗？@DhruvSinghal这表示您的组件无法访问路由器道具。也许可以尝试使用路由器
包装您的组件
@SagarKodte相同，我的是第一个：）我收到此错误
预期分配或函数调用，但看到的却是表达式。有什么建议吗？答案被低估了-这是一个完整的解决方案；简单地在上面的答案中添加一行并不能正确地通过道具。这是关键部分。简单的说，非常有帮助！标记为新的正确答案，因为这一个有更多信息。您能详细说明“然后在您的第一个组件”吗？我很难把这些都装在一起。哪个组件是“第一个组件”？@sammms不是作者，但我相信他们只是指重定向组件。您可以将其添加到任何要传递道具的重定向组件中，前提是路由组件具有一个作为函数设置的渲染道具，和
componentDidMount(props){
console.log("property_id",this.props.location.state.property_id);}

<Redirect to={{
    pathname: '/path',
    state: { id: '123' }
}} />