你应该如何通过Redirect
组件传递 props而不让它们暴露在 url 中?
像这样<Redirect to="/order?id=123 />"
?我正在使用react-router-dom
.
你应该如何通过Redirect
组件传递 props而不让它们暴露在 url 中?
像这样<Redirect to="/order?id=123 />"
?我正在使用react-router-dom
.
您可以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
您应该首先在 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);}
您可以像这样使用浏览器历史记录状态:
<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
使用功能组件/钩子,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
所需的组件访问它