Как передать props в компонент?

Question

[Jedi]

Привет!

Смотрите, я используя render={props => <Home {...props}/>}передаю props`ы. А как мне передать те же props`ы компоненту Menu?

class App extends Component {
  render() {
    return (
      <div className="App">
        <Menu/>
        <main>
          <Switch>
            <Route exact path="/" render={props => <Home {...props}/>}/>
            <Route path="/contacts" render={props => <Contacts {...props}/> }/>
          </Switch>
        </main>
      </div>
    );
  }
}

Заранее большое спасибо!

Answer 1

[Mikhail Osher]

Что-то такое.

import { withRouter } from 'react-router-dom';

const Menu = () => { ... }

export default withRouter(Menu);

Бонус:

В Вашем случае можно просто писать

<Route exact path="/" component={Home} />
<Route path="/contacts" component={Contacts} />

Comments

[Jedi]

В компоненты Menu мне нужны состояния. Я не понимаю принцип работы withRouter. Мне отдельно нужно компонент создавать, чтобы получить роут?

Спасибо за Бонус.

[Mikhail Osher]

PHPjedi, компоненты, которые передаёте в Route, получают props текущего роута: location, history, match. Компонент withRouter прокидывает эти же props любому компоненту, который передан в него. Это называется higher order component. https://reactjs.org/docs/higher-order-components.html

[Jedi]

Mikhail Osher, Спасибо большое! Теперь все понял).

[Антон Спирин]

PHPjedi, почитайте документацию, там все это есть. Ответы почти на все ваши вопросы, вы бы нашли самостоятельно если бы изучали документации.

[Jedi]

Антон Спирин, Спасибо, прочитаю!