ReactJS - 使用重定向组件传递props

IT技术 javascript reactjs react-router-dom
2021-02-16 05:55:58

你应该如何通过Redirect组件传递 props而不让它们暴露在 url 中?

像这样<Redirect to="/order?id=123 />"我正在使用react-router-dom.

6个回答

您可以Redirect像这样传递数据

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

这是您访问它的方式:

this.props.location.state.id

API文档解释了如何通过状态和其他变量重定向/历史props。

来源:https : //github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object

感谢@Anas 和 SakhiMansoor 的帮助。你们都应该得到解决方案的标记!:)
2021-04-17 05:55:58
@SakhiMansoor是该对象应包含pathnamesearchstate,等,这是由浏览器历史记录中使用的值。任何自定义值都应包含state在下一级对象中。它更清晰,并将浏览器历史使用的内容与您自己的自定义对象分开。
2021-04-21 05:55:58
嗨...我在接收通过重定向传递的状态参数时遇到了一些麻烦。this.props.location 给我未定义。有什么建议?
2021-05-01 05:55:58
@SakhiMansoor 我尝试了相同的代码,但它给了我这个错误:对象文字可能只指定已知属性,并且“id”不存在于“LocationDescriptor<any>”类型中。
2021-05-05 05:55:58
这显然有效 <Redirect to={{ pathname: "/app/AntennaAdd", state: {id: "123"} }} />;
2021-05-13 05:55:58

您应该首先在 App.js 中定义的 Route 中传递props

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

然后在你的第一个组件中

<Redirect
            to={{
            pathname: "/test/new",
            state: { property_id: property_id }
          }}
        />

然后在您的 Redirected NewTestComp 中,您可以像这样在任何地方使用它

componentDidMount(props){
console.log("property_id",this.props.location.state.property_id);}
标记为新的正确答案,因为这个答案有更多信息。
2021-04-16 05:55:58
@sammms 不是作者,但我相信他们只是指在重定向组件中。您可以将此添加到您希望传递道具的任何重定向组件,前提是 Route 组件具有设置为函数的渲染道具。有关 Redirect to 的更多信息请参见此处,有关 Route render 的更多信息请参见此处
2021-04-21 05:55:58
被低估的答案 - 这是一个完整的解决方案;简单地在上面的答案中添加这一行并不能正确传递道具。
2021-04-22 05:55:58
这是关键部分。至少可以说简单且非常有帮助!
2021-05-01 05:55:58
你能详细说明“然后在你的第一个组件中”吗?我很难把这一切放在一起。哪个组件是“第一个组件”?
2021-05-04 05:55:58

您可以像这样使用浏览器历史记录状态:

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

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

来源:https : //github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object

@SagarKodte 同样,我的是第一个:)
2021-04-19 05:55:58
this.props.location 给我未定义。有什么建议?
2021-04-20 05:55:58
@DhruvSinghal 这意味着您的组件无权访问路由器道具。也许尝试用withRouter
2021-05-05 05:55:58
我收到此错误Expected an assignment or function call and instead saw an expression有什么建议?
2021-05-05 05:55:58

使用功能组件/钩子,react-router-dom 版本 5.2.0 并传递函数和常规props:

使用@Barat Kumar 的回答,您还可以在此处了解如何使用重定向将函数作为props传递和访问。请注意,访问 property_id props的方式也有所不同。

路线是一样的:

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

重定向:

<Redirect
  to={{
    pathname: "/test/new",
    testFunc: testFunc,
    state: { property_id: property_id }
  }}
/>

访问 NewTestComp 中的两个props:

 useEffect(() => {
   console.log(props.history.location.testFunc);
   console.log(props.history.location.state.property_id);          
 }, []);

请注意,“状态”来自类组件中的使用。在这里你可以使用任何你想要的名字,也可以像我们做函数一样传递常规props。因此,从@Barat Kumar 接受的答案中稍稍离开一点,您可以:

<Redirect
  to={{
    pathname: "/test/new",
    testFunc: testFunc,
    propetries: { property_id: property_id1, property_id2: property_id2},
    another_prop: "another_prop"
  }}
/>

并像这样访问那些:

console.log(props.history.location.testFunc);
console.log(props.history.location.propetries.property_id1);
console.log(props.history.location.propetries.property_id2);
console.log(props.history.location.another_prop);
<Redirect to={{
    pathname: '/path',
    state: { id: '123' }
}} />

然后您可以通过this.props.location.state.id所需的组件访问它