Table of Contents
- Introduction
- Install react-router-dom
- Setting up the links
- Setting up Router and Route
- Passing data with props
Introduction
In this post, I am going to talk about how to implement routing in your react applications with react-router-dom.
I will explain how to implement routing as well as passing data around in your components. (I expect you to have react-development-environment on your computer as a prerequisite.)
Install react-router-dom
You can install react-router-dom by running the command below.
$ npm install react-router-domSetting up the links
First and foremost, import Link from react-router-dom and create links that are connected with designated paths.
For instance, if a user clicks Home in the code below, the user will be transferred to ’/’ page and if a user clicks About, the user will be sent to /About page.
import React from 'react'
import { Link } from 'react-router-dom'
class Navbar extends React.Component {
render(){
return(
<div>
<Link to="/">Home</Link>
<Link to="/About">About</Link>
</div>
)
}
}
export default Navbar;Setting up Router and Route
All you gotta do to connect one page to another in your react app is connecting the paths and components using Router and Route.
There really are only two things you should keep in your mind.
Routesmust be defined inRouters.- Write the path and the corresponding component in each
Route
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './Navbar';
import About from './About';
import Home from './Home';
class App extends Component {
render() {
return (
<div className="App">
<Router>
<div>
<Navbar /><hr/>
<Route exact path='/' component={Home}/>
<Route path='/About' component={About}/>
</div>
</Router>
</div>
);
}
}
export default App;Passing data with props
You can accomplish this very easily by writing Route element like the code below.
class App extends Component {
render() {
return (
<div className="App">
<Router>
<div>
<Navbar /><hr/>
<Route exact path='/' component={Home}/>
<Route path='/About' render={ () => <About name={'Tom'}/> }/>
</div>
</Router>
</div>
);
}
}
export default App;You can get the data in About component like the code below.
import React from 'react'
class About extends React.Component {
render(){
return(
<div>
<h1>About</h1>
<h2>I am {this.props.name}</h2>
</div>
)
}
}
export default About;