React Routing With Links And Passing In Props

When first learning to pass in props to a component, you likely did it when rendering the child component.

<childComponent propName={this.propName} /> 

Before long you’ll find yourself in situations where you want to simulate a multi-page site. In this article we’ll explore setting up routing links, rendering child components with Routes and passing in props.


Setup

Let’s assume you’ve already created your React app with create-react-app, your App.js file is a parent that holds state and will hold the Router for your app.

  1. While in your project folder inside the terminal, install the react router dom package:
npm install react-router-dom --save-dev

2. At the top of your App.js folder, add the following import:

import { 
BrowserRouter as Router,
Route, Link } from 'react-router-dom';

i. Router allows you to setup your Router

ii. Route allows you to setup Routes which define the URL path where your component is rendered.

iii. Link allows you to create links directing users to a Route path URL.

3. In your your App.js, wrap the element holding all your JSX with a Router.

render() {
return (
<Router>
<div>
<h1>Routing Brings Immortality</h1>
<p>Lorem ipsum dolor sit, amet consectet adipisicing</p>
</div>
</Router>
)
}

4. Next you’ll define your Routes, creating one for each component you’d eventually like to Link to or pass in props.

<Router>
render() {
return (
<Router>
<div className="App">
<div>
<h1>Routing Brings Immortality</h1>
<p>Lorem ipsum dolor sit, amet consectet adipisicing</p>
<Route path="/" exact component={Home} />
<Route path="/compname" component={CompName} />
</div>
</div>
</Router>
}

Note: If you don’t add the “exact” attribute to the Route representing your root URL (“/”), the root component will always render with components branching off the root URL.

5. Now that your Routes are defined, you can add in links. The links will be rendered as anchor tags. Just be sure to import {Link} from react-route-dom on all components where links are rendered. The “to” attribute should match the path defined in the associated Route.

import { Link } from 'react-router-dom';
class TopNav extends Component {
render() {
return (
<div className="topNavLinks">
<Link to="/" className="goHome">Home</Link>
<Link to="/somecomponent">Component Name</Link>
</div>
)
}
}

Passing in props through the Router

Since App.js holds the Routes and state, but isn’t rendering any child components, we’ll need to pass in props through the router. The overall syntax is as follows:

<Route
path="/childcomponent"
render={() => (<ChildComponent Prop1={this.function1} Prop2={this.function2} Prop3={this.function3} />)}
/>

You simply add your component and prop to the inline function as is displayed.

Note that “render” is used instead of “component”. Providing an inline function to the component attribute creates a new component every render. Using “render” instead of “component” ensures you’re just updating the existing component.