有没有可能在React Link中通过比赛传递道具

Question

我以两种不同的方式将道具传递给同一个组件。

一次按路线路径：-

<Route path="/CreateProfile/:title" exact component={ProfileForm} />

另一个通过链接作为：

<Table.Cell><Link to={{  // it will land to the same component ProfileForm
pathname:  "/EditProfile",
props: {
profile : profile,
title: "Edit Profile" 
}
}} >Edit Profile</Link></Table.Cell>

在我的ProfileForm中，我尝试将道具读取为：-

useEffect(() => {
if(props.match.params.title){ // it gives no error. 
setTitle(props.match.params.title);
}else if(props.location.props.title){ // gives error .props.title undefiened 
setTitle(props.location.props.title);
}
// if(props.match.params.profile){
//   setProfile(props.location.state.profile)
// }
if(props.location.props.profile){
setProfile(props.location.props.profile)
console.log("profile: "+props.location.props.profile)
}
}

else if(props.location.props.title)在它来自路由器时给出一个错误。这是意料之中的事，因为我是由林克设定道具的。我注意到props.match.params.title无论是否设置，都不会给出任何错误。所以我希望通过林克的比赛道具，使路线和林克都能正常工作。可以通过火柴传递道具吗？或者我该如何解决这个问题？

Answer 1

您可以通过路径名(URL(传递数据，即通过URL匹配或查询参数，或通过路由状态。

链接到对象

可以具有以下任何属性的对象：

• 路径名：表示要链接到的路径的字符串。
• search：查询参数的字符串表示
• hash：放在URL中的hash，例如#A-hash
• state：要持续到该位置的状态

您显然已经为路径参数为title的路径名变体设置了路由。

"/CreateProfile/:title"

您应该简单地构建您的链接，以便在其中内置正确的title值

<Link to={{ pathname: "/CreateProfile/<some title value>" }} >
Create Profile
</Link>

从这里，您只需要正确地访问路线的match.params.title。

现在，在编辑配置文件路由的情况下，"/EditProfile"有，OFC，没有路由匹配参数(也没有查询参数(，因此正确的方法是使用路由状态。

<Link
to={{
pathname: "/EditProfile",
state: {
profile,
title: 'Edit Title',
},
}}
>
Edit Profile
</Link>

并从history对象正确访问路由状态

useEffect(() => {
const { history, match } = props;
if (match.params.title) { 
setTitle(match.params.title);
} else if (history.location.state.title){
setTitle(history.location.state.title);
}
if (history.location.state.profile) {
setProfile(history.location.state.profile)
console.log("profile: ", history.location.state.profile)
}
}

然而，关于路由状态的建议是，从props.history.location到您正在访问的最终值，对象路径并不总是保证存在(即被定义(，因此有必要进行保护，以防止"未定义的访问"错误。

// state may not be defined depending on which route the app took to get to the page
history.location.state && history.location.state.title