reactjs - 到达路由器 props.navigate

Question

我正在尝试在result提交表单后使用到达路由器导航到 url。使用props.navigate所需的 url，但没有呈现任何组件（我试图<Result/>在查询后呈现。

为了增加复杂性，我想将personsResult道具传递给Result

这是我当前方法的概述。

const App = () => {
  return (
    <div>
      <Router>
        <Search path="/" />
        <List path="list" />
        <Result path="result/:query" /> //!
      </Router>
    </div>
  )
}

const Search = props => {
  const [query, setQuery] = useState("")
  const [personsResult, setPersonsResult] = useState("") //Pass to result

  const handleSubmit = async e => {
    e.preventDefault()
    const person = await personsService.get(query)
    setPersonsResult(person)
    props.navigate(`result/${query}`) //!
  }

  return (
    <div>
      ...
      <SearchForm
        handleSubmit={handleSubmit}
        query={query}
        setQuery={setQuery}
      />
    </div>
  )
}

react-router-dom如果有更简单的方法来解决这个问题， 我愿意切换到。