到达路由器props.navigate

Question

我试图在提交表单后使用“到达路由器”导航到result网址。使用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。