使用params.get()动态渲染页面失败，寻求技术帮助

核心问题：参数名不匹配 #

跳转按钮拼接的URL参数是url（/learn?url=${item.place}），但Learn组件里却尝试获取place参数（params.get("place")），参数名称完全不一致，这是导致数据无法渲染的直接原因。

修正方案二选一： #

方案1：修改跳转按钮的参数名

把URL参数名改为place，和组件内获取的参数名保持一致：

<button onClick={e => nav(`/learn?place=${item.place}`)} className='absolute bottom-5 right-5 text-green-300 bg-[#0F1014] p-2 rounded-sm ease-in-out duration-150 hover:bg-green-900 text-sm'>Learn more</button>

方案2：修改组件内的参数获取名

如果要保留url作为参数名，就调整组件里的获取逻辑：

function Learn() {
    const [params] = useSearchParams();
    console.log(params.get("url"))

  return (
    <div>
        <h1>{params.get("url")}</h1>
    </div>
  )
}

额外排查点 #

• 确认React Router环境配置
  确保Learn组件处于React Router的上下文中：根组件已用<BrowserRouter>包裹，且Learn是通过<Route path="/learn" element={<Learn />} />这类路由规则渲染的，而非直接手动调用组件。
• 检查参数值是否正确传递
  跳转后查看浏览器地址栏，确认参数是否携带了预期值（比如/learn?place=北京），如果参数为空，需要检查item.place是否有有效数据。
• 监听参数变化触发组件更新
  若参数名匹配后仍不渲染，可添加监听确保组件响应参数变化：

function Learn() {
    const [params] = useSearchParams();
    const place = params.get("place");

    useEffect(() => {
        console.log("参数更新:", place);
    }, [place]);

    return (
        <div>
            <h1>{place}</h1>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Malik Awesu