如何为React Router的NavLink添加查询字符串？

有几种简单的方式可以实现用NavLink导航到/home?onsite=1路径：

1. 直接传入完整路径字符串 #

这是最直观的方式，直接把带查询参数的完整路径写在to属性里：

<NavLink to="/home?onsite=1">首页</NavLink>

2. 使用对象格式配置to属性 #

如果需要动态生成查询参数，推荐用对象形式配置to，这样更灵活：

<NavLink 
  to={{
    pathname: '/home',
    search: '?onsite=1'
  }}
>
  首页
</NavLink>

如果涉及多个查询参数或者需要动态设置参数值，用URLSearchParams来构建查询字符串会更规范：

// 可以在组件内动态生成查询参数
const searchParams = new URLSearchParams();
searchParams.set('onsite', '1');
// 若有其他参数可继续添加：searchParams.set('another', 'value')

<NavLink 
  to={{
    pathname: '/home',
    search: searchParams.toString()
  }}
>
  首页
</NavLink>

以上几种方式都能让NavLink正确导航到目标路径，点击后地址栏会显示/home?onsite=1。

内容的提问来源于stack exchange，提问作者Chris Hansen