React Router如何根据文本框输入值实时更新当前路径名？

实现方案 #

首先明确：不需要使用<Link>组件 #

<Link>是声明式跳转组件，仅适用于用户点击交互的跳转场景，输入值实时同步URL的需求用编程式导航实现更合适。

步骤1：调整路由配置 #

原有路由仅匹配带参数的路径，需要补充空参数路径的匹配规则，确保输入为空时也能正常渲染<Search>组件：

import { Link, BrowserRouter as Router, Route } from "react-router-dom";
...
<Router>
  ...
  {/* 同时匹配空输入和带输入的搜索路径 */}
  <Route path={["/search", "/search/:searchInput"]}>
     <Search />
  </Route>
</Router>

步骤2：在Search组件中实现URL同步逻辑 #

借助useHistory（React Router v5版本，若为v6版本替换为useNavigate）监听Context中输入值的变化，实时更新路由：

import { useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
import SearchContext from "../Search/context"

const Search = () => {
   const context = useContext(SearchContext)
   const history = useHistory()
   // 从路由参数中获取已有的搜索值
   const { searchInput: urlSearchInput } = useParams()

   // 功能1：输入值变化时同步更新URL
   useEffect(() => {
     // 输入为空时走基础搜索路径，非空时对输入值编码后拼接到路径中
     const targetPath = context.searchInput.trim() 
       ? `/search/${encodeURIComponent(context.searchInput.trim())}`
       : '/search'

     // 仅当当前路径与目标路径不一致时才更新，避免无限渲染
     if (history.location.pathname !== targetPath) {
       // 用replace而非push，避免输入过程产生大量冗余历史记录
       history.replace(targetPath)
     }
   }, [context.searchInput, history])

   // 可选功能：URL参数变化时同步回输入框，适配页面刷新、直接访问带参链接的场景
   useEffect(() => {
     const decodedInput = urlSearchInput ? decodeURIComponent(urlSearchInput) : ''
     if (decodedInput !== context.searchInput) {
       // 调用Context中定义的更新输入值的方法即可，方法名以你实际的定义为准
       context.setSearchInput(decodedInput)
     }
   }, [urlSearchInput, context])

   return (...)
}
export default Search

补充说明 #

• encodeURIComponent会自动将空格、特殊字符转换为URL合法的编码格式，比如输入lil red会自动转为lil%20red，符合需求。
• 如果使用的是React Router v6版本，只需要把useHistory相关逻辑替换为useNavigate即可：

  import { useNavigate } from "react-router-dom"
  // ...
  const navigate = useNavigate()
  // 替换history.replace(targetPath)为下面的写法
  navigate(targetPath, { replace: true })
  

内容的提问来源于stack exchange，提问作者Ridhwaan Shakeel