Props! — and how to pass props to components in React. (part_4)

part1 & part2 & part3

Pass props with React Router

React Router is another essential React library which is often used to complement React applications. Mapping URL routes to React components usually looks similar to this:

const App = ({ user }) =>
<Router>
<Route exact path='/' component={Home} />
<Route path='/articles' component={Article} />
<Route path='/about' component={About} />
</Router>

But how would you pass props to the child component in React Router? You can use the render prop instead of the component prop for passing props to the child component.

const App = ({ user }) =>
<Router>
<Route
exact path='/'
render={() => <Home user={user} />}
/>
<Route
path='/articles'
render={() => <Article user={user} />}
/>
<Route
path='/about'
render={() => <About user={user} />}
/>
</Router>

Whereas the component prop would re-render the component every time when using an inline function, the render prop doesn’t perform the remounting. So you can be sure that the components are kept mounted and yet you can pass props to them. In addition, you receive the React Router props in the render prop function, in case you want to do something with them, too:

const App = ({ user }) =>
<Router>
<Route
exact path='/'
render={props => <Home user={user} />}
/>
<Route
path='/articles'
render={props => <Article user={user} />}
/>
<Route
path='/about'
render={props => <About user={user} />}
/>
</Router>

The route props include match, location, and history which are used to get the current route state from React Router within your component. So regardless of the component prop or render prop, for both you would receive the match, location, and history props in the Home, Article and About components:

const App = () =>
<Router>
<Route exact path='/' component={Home} />
<Route path='/articles' component={Article} />
<Route path='/about' component={About} />
</Router>
const Home = (props) =>
console.log(props.history) ||
console.log(props.match) ||
console.log(props.location) ||
<h1>My Home Page</h1>
...

Often when working with React Router you are confronted with one of the following errors:

• props.location undefined
• props.history undefined
• props.match undefined

As mentioned, you only have access to these props when using the component in the Route component from React Router. Every other component doesn’t have the React Router props, unless you pass them further down the component tree to these components. Another way of making the React Router props available in your component is using the withRouter() higher-order component from React Router.

const App = () =>
<Router>
<Route exact path='/' component={Home} />
<Route path='/articles' component={Article} />
<Route path='/about' component={About} />
</Router>
const Home = () =>
<TitleWithRouter />
const Title = (props) =>
console.log(props) || <h1>My Home Page</h1>;
// without withRouter the props in the Title component would be an empty object
const TitleWithRouter = withRouter(Title);

Basically these are the most common pitfalls when using React Router. You should definitely try React Router once you have learned the fundamentals of React.

Source: StackOverflow, Robin Wieruch, Medium, ReactJs, MDN