带有重定向组件的 ReactJS-Pass 道具

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

<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

你可以像这样用 Redirect传递数据:

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

你可以这样访问它:

this.props.location.state.id

API 文件解释了如何在 Redirect/History 道具中传递状态和其他变量。

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

• 你可以带着你自己的钩子来做同样的事情:

import { createBrowserHistory } from "history";


const withRefresh = createBrowserHistory({ forceRefresh: true });
const ROOT_PATH = process.env.PUBLIC_URL || "/myapp";


const useRedirectToLocation = (params="1") => {
if(params){
withRefresh.push({
pathname: `${ROOT_PATH}/create`,
state: { id: `${params}` }
});
}
}


export default  useRedirectToLocation;

• 然后像这样使用它:

import useRedirectToLocation from  './useRedirectToLocation




const handleOnClick = params => useRedirectToAccounting(params)


const RedirectorComponent = () => <a onClick={handleOnClick}>{"Label"}</a>

* * 这可以根据需求进一步重构。

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

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

然后在你的第一个组件

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

然后在你的重定向 NewTestComp 中你可以像这样在任何你想要的地方使用它

componentDidMount(props){
console.log("property_id",this.props.location.state.property_id);}

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

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

使用 Functional Component/Hooks，response-router-dom 版本5.2.0，传递函数和常规道具:

使用@Barat Kumar 答案，您还可以看到如何使用 Redirect 作为道具传递和访问函数。请注意，访问 property _ id 道具的方式也有所不同。

路线是一样的:

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

重定向:

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

访问 NewTestComp 中的两个道具:

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

请注意，“状态”来自于类组件中的使用。在这里你可以使用任何你想要的名称，也传递正常的道具，就像我们做的功能。所以，离@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);