React Router is a collection of navigational components that compose declaratively with your application.
Prerequisite
React router requires react router package to be installed first in order to use it.
npm install --save react-router-dom
Insert into component
import {
BrowserRouter,
Route,
} from 'react-router-dom'
BrowserRouter: to wrap entire nav into this wrapper
Route: to create individual routes which points to dedicated components. It takes two params path and component
In Action
import {
BrowserRouter,
Route,
} from 'react-router-dom'
import Nav from './nav'
class App extends React.Component{
render(){
return(
<BrowserRouter>
<div className ="container">
<Nav />
<Route exact path="/" component = {home} />
<Route path="/about" component = {about} />
<Route path="/contact" component = {contact} />
</div>
</BrowserRouter>
)
}
}
Creating links
Once we have our router ready which points to the individual component we can create anchor links which points to this route.
let's call this as nav.js. In this file we believe to add all our routes links.
import React from 'react'
import {
Link,
NavLink
} from 'react-router-dom'
function nav(){
return(
<ul className='nav'>
<li><NavLink exact activeClassName ='active' to ='/'>Home</NavLink> </li>
<li><NavLink activeClassName ='active' to='/about'>About</NavLink></li>
<li><NavLink activeClassName ='active' to='/contact'>Contact</NavLink></li>
</ul>
)
}
module.exports = nav
We first imported Link and NavLink component form react-router-dom. Navlink has special tags which helps to create more meaningful links.
we can pass to attribute to NavLink which is mainly the path to the route. We can also pass activeClassName attribute and pass some styling to it.
we also added exact attribute to our root path. it's needed as we have '/' in front of all our other routes. So to avoid confusion we tell react to go to exect that path only.
i.e
.active { font-weight: bold; }
We have created three paths here
- /
- /about
- /contact
If we create dedicated components, it will directed to their dedicated path. Here, we have to add exact to our root route as well or else all other links will be loading that component.
404 Route
We can add 404 not found route with the use of Switch component of 'react-route-dom'
import {
BrowserRouter,
Route,
Switch
} from 'react-router-dom'
import Nav from './nav'
class App extends React.Component{
render(){
return(
<BrowserRouter>
<div className ="container">
<Nav />
<Switch>
<Route exact path="/" component = {home} />
<Route path="/about" component = {about} />
<Route path="/contact" component = {contact} />
<Route render= {()=> <p>Not found</p> />
</Switch>
</div>
</BrowserRouter>
)
}
}
So whenever it does not found the Route it will render not found. Instead of creating entire new class we just render the text directly from our route.
Top comments (0)