Send props while using react router

Question

It's been a while since I've used react router so bare with me. I'm trying to understand how to send a prop down while still using react router's history to change the URL. That sounds trivial, but I'm having a tough time understanding this. I have a bare minimum setup for the routing just enough to initialize the history object. From there, I'm trying to build out the app as normal to send props down without using redux.

index.js

ReactDOM.render(
  <Router>
    <Route exact path='/'>
      <App />
    </Route>
  </Router>
  ,document.getElementById('root')

app.js

...
let history = useHistory();
...
return (
    <div className="main-wrapper">
      <header>
        <Header />
      </header>
      <main>
      <Route path='/'>
        <Search collectWords={collectWords} searchWords={searchWords} />
      </Route>
      <Route path='/search-results'>
        <SearchResults people={people} />
      </Route>
      </main>
    </div>
  );

When a user performs a search, this function is called, but this is where things break for me. I get a blank screen with no props, but the URL does change.

const searchWords = (e) => {
    if (e) {
      e.preventDefault();
      restAPI.getPeople(words)
        .then(response => {
          setPeople(response.data.data);
          history.push('/search-results');
        })
        .catch(error => { throw new Error(error) });
    }
  }

You are using multiple Routers and this is a no-go. Remove the second one, you only need one Router per app but you can use many Routes. — devserkan
– devserkan, Commented Nov 29, 2020 at 15:12
Ok @devserkan I've removed the second one, but still having the same issue. — pingeyeg
– pingeyeg, Commented Nov 29, 2020 at 15:19
you wrapped your entire App component with an exact / route - that means that any route except the root will not render the App component.. — yoavmatchulsky
– yoavmatchulsky, Commented Nov 29, 2020 at 15:22
please share the whole code in a codesandbox. It's hard to debug — rotimi-best
– rotimi-best, Commented Nov 29, 2020 at 15:22
@rotimi-best here is the sandbox: codesandbox.io/s/blazing-bird-3rm6w — pingeyeg
– pingeyeg, Commented Nov 29, 2020 at 15:39

rotimi-best · Accepted Answer · 2020-11-29 16:04:30Z

1

Thanks for sharing the source code. I have found the solution. You need to do 2 things

Go to the index.js and remove the exact key word from the Route

ReactDOM.render(
  <Router>
    <Route path="/"> {/*Remove exact from here */}
      <App />
    </Route>
  </Router>,
  document.getElementById("root")
);

Once you do the above it will fix your issue but then you will get another error saying people.map is not a function. You need to change the default value of the people in your state from an object to an array. like:

const [people, setPeople] = useState([]);// See mine is an array `useState([])`

Everything should work fine now

answered Nov 29, 2020 at 16:04

rotimi-best

1,92223 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan · Accepted Answer · 2020-11-29 16:25:53Z

0

As mentioned in the comments, your usage of two separate routers is unnecessary, and the root of your issue. I would suggest actually removing the first (in index.js), and implementing your routing in App.js. Next, the Switch will render the first route that matches the new path, and '/' will match any path, therefore, you need to either give this route the "exact" property, or, as I would suggest, move it to the bottom of the switch (resulting in it acting as a "catch-all").

Here is a sandbox with correct implementation: https://codesandbox.io/s/magical-wiles-fulf0?file=/src/Search.js

Edit: After a quick look at your sandbox, it looks like you've removed some things, including your push to the history, but as long as the component is being rendered within the route, any changes to "people" (which you've initialized with an empty object, not an array) will trigger the re-render you want.

edited Nov 29, 2020 at 16:25

answered Nov 29, 2020 at 15:45

Ryan

3742 silver badges7 bronze badges

1 Comment

pingeyeg Over a year ago

Thanks, but that actually doesn't help. The issue I'm having is where the page isn't updating with the component I'm requesting based on the path change. Once the array people gets filled, the component should change due to the path change, but this isn't happening using Router.

Collectives™ on Stack Overflow

Send props while using react router

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related