How to pass props in routes?

Question

I have the selected country in Country.js. What I want to do is pass this country to Home.js and also render Home.js when the user clicks the button.

App.js

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Country} />
        <Route path="/home" component={Home} />
      </Switch>
    </BrowserRouter>
  );
};

Country.js

return (
    <div className="container">
      <label htmlFor="country">Country</label>
      <select name="country" id="country" onChange={handleSelect}>
        <option value="-1">--Country--</option>
        <option value="in">India</option>
        <option value="jp">Japan</option>
        <option value="us">USA</option>
        <option value="br">Brazil</option>
        <option value="ch">China</option>
        <option value="sr">Sri lanka</option>
      </select>
      <Link to="/home">
        <button type="submit">Proceed</button>
      </Link>
    </div>
  );

use [render](https://reactrouter.com/web/api/Route/render-func) prop instead of `component` on the `Route` component. One thing to be aware of when rendering a component using a `render` prop is that, by default, it doesn't passes router props to the component which is being rendered at that route. You will need to pass router props explicitly. `render={(routerProps) => ` — Yousaf, Aug 08 '20 at 12:31
Does this answer your question? [react-router - pass props to handler component](https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) — ezio4df, Aug 08 '20 at 12:33
where should I add this route ? In app.js or country.js? If I add ` render={(routerProps) => ` to **app.js** what are the changes I have to do in **Country.js** — NAMAN AGGARWAL, Aug 08 '20 at 12:37
`render` prop is used on the `Route` component, so use it in the component which defines the different routes in your app — Yousaf, Aug 08 '20 at 12:40

Steve · Accepted Answer · 2020-08-08T12:49:42.220

To pass the selected country to Home, its state needs to be managed at one level above Home.

const App = () => {
  const [country, setCountry] = useState();

  return (
    <BrowserRouter>
      <Switch>
        <Route
          exact
          path="/"
          render={(props) => (
            <Country
              {...props} // pass through router props if needed
              country={country}
              onChangeCountry={setCountry}
            />
          )}
        />
        <Route
          path="/home"
          render={(props) => (
            <Home
              {...props} // pass through router props if needed
              country={country}
            />
          )}
        />
      </Switch>
    </BrowserRouter>
  );
};

Country.js:

const Country = ({country, onChangeCountry}) => {
  const handleSelect = useCallback(
    (event) => {
      if (typeof onChangeCountry === 'function') {
        onChangeCountry(event.target.value);
      }
    },
    [onChangeCountry]
  );

  return (
    <div className="container">
      <label htmlFor="country">Country</label>
      <select
        name="country"
        id="country"
        value={country}
        onChange={handleSelect}
      >
        <option value="-1">--Country--</option>
        <option value="in">India</option>
        <option value="jp">Japan</option>
        <option value="us">USA</option>
        <option value="br">Brazil</option>
        <option value="ch">China</option>
        <option value="sr">Sri lanka</option>
      </select>
      <Link to="/home">
        <button type="submit">Proceed</button>
      </Link>
    </div>
  );
};

You're welcome @NAMANAGGARWAL. I edited the answer to pass through the router props as others suggested, but it's entirely optional. — Steve, Aug 08 '20 at 12:50

How to pass props in routes?

1 Answers1