0

I am trying to use Reach Router to navigate to a result url after a form submit. Using props.navigate takes be to the desired url, but no component is rendered (I am trying to render <Result/> after the query.

To add to the complexity, I would like to pass the personsResult prop to Result

Here is an outline of my current approach.

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>
  )
}

I am open to switching to react-router-dom if there is a simpler means of solving this.

isaacsultan
  • 3,784
  • 3
  • 16
  • 29
  • If you are open to use "react-router-dom", you can have following switch : And navigation can be done as : this.props.history.push({ pathname: '/result', state: { personsResult: resultData } }) – Hemant Bhatt Aug 02 '19 at 11:17
  • What exactlly do you mean by "no component is rendered"? As in you get a blank page, or the url changes, but you don't navigate away from the page, and you're left on the old page? Btw, passing the props should be easy. Just pass an object as the second argument to the navigate call: ``` navigate(`result/${query}`, {personResult: "some value"}) ``` – timmysmalls Oct 19 '19 at 21:29

0 Answers0