CODEWITHSUNDEEP
react-router
Igor Chernega
Igor Chernega

Reputation: 631

react router pass props to children

I've seen the question on stackoverflow and other resources, but still I can't see a clear answer. Why on earth I can't pass props down to children in react router? React stands on that pillar of passing props in one direction. What am I missing? Here's my code:

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import Home from './Home.js'
import Favourites from './Favourites.js'

class App extends React.Component {
  render() {
    const cards = [
      {
        id: 1,
        name: 'Buzz',
        selected: false
      },
      {
        id: 2,
        name: 'Buzzina',
        selected: true
      }
    ]
    return(
      <Router>
        <div className='app'>
          <nav>
            <ul>
              <li><Link to='/'>Home</Link></li>
              <li><Link to='/favourites'>Favourites</Link></li>
            </ul>
          </nav>

          <Route exact path='/' component={ Home } />
          <Route path='/favourites' component={ Favourites } />
        </div>
    </Router>
    )
  }
}

export default App

How can I pass props to my Home and Favorites components if I don't want to use black magic and shamanic dance?

Upvotes: 0

Views: 61

Answers (1)

dns_nx
dns_nx

Reputation: 3953

You can try this:

const MyHome = (props) => {
  return (
    <Home {...props} />
  );
}

Then you have to use renderinstead of component

<Route exact path="/products" render={MyHome} />

Upvotes: 1

Related Questions