# Working with react-router-dom

## react-04-router

React Router has been broken into three packages: react-router, react-router-dom, and react-router-native. For webpages you need to use react-router-dom
and for mobile apps you need to use react-router-native. react-router is exported in both of these components.

###### Installation
npm install --save react-router-dom


Two types of Router

*  <BrowserRouter>
*  <HashRouter>


Router components only expect to receive a single child element. To work within this limitation, it is useful to create an component that renders the rest of your application

###### Changes in the main component
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))

###### Actual routing settings.
<Route path='/aboutus'/>

• When the pathname is ‘/’, the path does not match
• If you only want to match ‘/aboutus’, then you need to use the “exact” prop.

I have added these changes in my layout file

<Switch>
<Route exact path='/' component={Home}/>
<Route path='/contactus' component={ContactUs}/>
</Switch>

###### add these changes in required component. I have added these in my Navbar.js
    <nav>
<ul>