如何在 React-Router 中传递 Props？

在 Link React-Router 中传递 Props

React-Router 的 Link 组件允许在组件之间传递数据。为此，请在链接的 to 属性中定义一个参数，并且可以使用 this.props 在链接组件中访问该参数的值。

问题：

提供的代码无法将 props 传递给链接的组件，因为 中缺少路由路径。

解决方案：

将路径参数添加到中定义：

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

使用Location传递数据：

使用react-router v4/v5时，可以通过location对象传递数据：

链接（查询）：

<Link to={{pathname: '/', query: {backUrl: 'theLinkData'}}} />

链接（搜索）：

<Link to={{pathname: '/', search: '?backUrl=theLinkData'}} />

访问数据（功能组件） ):

const CreatedIdeaView = () => {
  const { query, search } = useLocation();
  console.log(query.backUrl, new URLSearchParams(search).get('backUrl'));
};

访问数据（类组件）：

class CreateIdeaView extends React.Component {
  render() {
    console.log(this.props.location.query.backUrl);
    return <div>{this.props.location.query.backUrl}</div>;
  }
}

示例：

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}

class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}

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