如何在 React Router 中将 Props 传递给新视图？

在 Link React-Router 中传递 Props

问题：

在 React-Router 应用程序中，Link 组件是尽管属性包含在链接的参数中，但不将属性传递给新视图。

解决方案：

过时的代码（v1）：

<Link to="ideas" params={{ testvalue: "hello" }}></Link>

<Route name="ideas" handler={CreateIdeaView} />

最新代码（v4/v5）：

// Using query
<Link to={{ pathname: `/${this.props.testvalue}`, query: { backUrl } }} />

// Using search
<Link to={{ pathname: `/${this.props.testvalue}`, search: `?backUrl=${backUrl}` }} />

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

用法：

• 的 to 属性接受具有以下属性的对象：

  • pathname：新视图的路径。
  • params：包含要传递给新视图的属性的对象。
• Route 组件必须具有与 to 属性中的动态参数值匹配的 path 属性。

功能组件示例：

<code class="js">const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();
  console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'));
  return <span>{testvalue} {backurl}</span>;
};</code>

注意：上面的代码使用了来自react-router-dom的钩子。

更新的代码示例：

<code class="js">const App = () => {
  return (
    <React.Fragment>
      <Link to={{ pathname: '/ideas/:itemID', itemID: 222, item: { okay: 123 } }}>Ideas</Link>
      <Switch>
        <Route exact path="/ideas/:itemID/" component={Ideas} />
        <Route path="/hello/:WORLD?/:thing?" component={World} />
      </Switch>
    </React.Fragment>
  );
};</code>

以上是如何在 React Router 中将 Props 传递给新视图？的详细内容。更多信息请关注PHP中文网其他相关文章！