如何使用 UseParams 基于搜索使用 react-router 填充 URL

Question

我正在尝试使用 React-Router 为我的 Web 应用程序创建一个可共享的链接。在搜索栏中，用户输入一个品牌，我想使用 useParams 在 URL 中显示搜索到的品牌。

我将如何处理这个问题？

BrandTable.js 是带有 searchHandler 函数的组件 TextInput.js 是带有搜索栏的组件。

到目前为止，我可以根据我搜索的品牌更改 URL，但是如果我在不同的窗口中打开该 URL，则搜索结果不存在。

这里是沙箱：https://codesandbox.io/s/quizzical-banach-8jknp

import { useHistory , useLocation, useParams} from "react-router";

const BrandTable = () -> {


const searchHandler = (searchString) =>
{

  
  let newFilters = {...filters} 
  newFilters.search = searchString
  setFilters(newFilters) 
  
  const params = new URLSearchParams()
  if (searchString) {
    params.append("brand", searchString)
  } 
  history.push({search: params.toString()})



return(
     <TextInput searchHandler={searchHandler} filters={filters}  />
     )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

function TextInput(props) {
    const classes = useStyles();

    console.log(props.filters)

    return (
      <>
    <form   action="/" method="get" className={classes.root} noValidate autoComplete="off">
   
      <TextField style={{width:"600px"}} onChange={(e)=>props.searchHandler(e.target.value)} value={props.filters.search}  id="outlined-basic" label={props.filters.search==''?'Search brand':''} variant="outlined" />

       
    </form>

    </>

  );
}

export default TextInput