是否可以在 React 中通过匹配传递道具 Link

Question

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

一次路由路径：-

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

另一个 Link 作为：

<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 中，我尝试将 props 读取为：-

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) 当它来自路由器时给出一个错误。这是预料之中的，因为我通过 Link 设置了道具。我注意到 props.match.params.title 无论是否设置，都不会给出任何错误。所以我希望通过 Link 的匹配传递道具，以便 Route 和 Link 都能正常工作。是否可以通过匹配传递道具？或者我该如何解决这个问题？

Answer 1

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

Link to-object

An object that can have any of the following properties:

pathname: A string representing the path to link to.

search: A string representation of query parameters.

hash: A hash to put in the URL, e.g. #a-hash.

state: State to persist to the location.

您显然已经为 pathname 变体设置了路由参数 title.

"/CreateProfile/:title"

您应该简单地构建 link 以在其中内置正确的 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 到您正在访问的最终值，因此需要保护以防止 "access blah of undefined"错误。

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

是否可以在 React 中通过匹配传递道具 Link

Is it possible to pass props by match in React Link

reactjs

react-router

react-props

react-link