将url参数传递给react-router的Link组件的正确方法是使用to属性中的pathname和search属性。
React Router的Link组件是用于在应用程序中导航到不同URL的组件。可以通过to属性指定要导航到的目标URL。要将URL参数传递给Link组件,可以在to属性中使用pathname和search属性。
pathname属性指定导航到的目标URL路径,可以是字符串或对象。如果是对象,可以在其中指定URL路径和参数。例如:
import { Link } from 'react-router-dom';
<Link to={{ pathname: '/path', search: '?param1=value1¶m2=value2' }}>Link</Link>
search属性指定URL的查询字符串部分,其中包含参数和对应的值。可以通过使用query-string库来动态构建查询字符串。
对于上述示例中的参数param1和param2,可以使用以下方法构建查询字符串:
npm install query-string
import { Link } from 'react-router-dom';
import queryString from 'query-string';
const params = { param1: 'value1', param2: 'value2' };
const search = queryString.stringify(params);
<Link to={{ pathname: '/path', search }}>Link</Link>
这样可以在点击Link组件时将参数传递给React Router,并在目标URL的查询字符串中使用。
如果需要在目标组件中获取传递的参数,可以使用React Router的useLocation钩子或withRouter高阶组件。详细信息可以参考React Router的文档。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云