# Step 4

Modern applications don't just have 1 URL, they have multiple routes that you can go to. React is a library, not a framework, so if we want things like a router, then we have to use a 3rd party library, like [React Router](https://github.com/ReactTraining/react-router). Let's map our Books container to a URL.

```bash
$ yarn add react-router-dom
$ yarn add -D @types/react-router-dom
```

If you do not have Yarn:

```bash
$ npm i -S react-router-dom
$ npm i -D @types/react-router-dom
```

React router will intercept all requests to our app and render the correct component based on the route. In order to use it, we need to wrap our App in a router component

src/index.tsx

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
```

This isn't particularly useful, so let's add a route

src/App.tsx

```jsx
import React, { Component } from 'react';
import './App.css';
import BooksPage from './containers/Books';
import { Switch, Route } from 'react-router-dom';

class App extends Component {
	render() {
		return (
			<div className="App App-header">
				<Switch>
					<Route exact path="/books" component={BooksPage} />
				</Switch>
			</div>
		);
	}
}

export default App;
```

We are wrapping our route in a Switch component, which acts kind of like a switch statement and only renders the component that matches the path. We add "exact" to our route because we don't want to render other components that might also match the "/books" path on accident.

When you go to [http://localhost:3000](http://localhost:3000/), you won't see anything. If you go to <http://localhost:3000/books> then you will see the books page. There is no default page, so let's add a Home page.

src/containers/Home.tsx

```jsx
import React, { Component } from 'react';

export default class HomePage extends Component {
	render() {
		return <div>The home page</div>;
	}
}
```

src/App.tsx

```jsx
import React, { Component } from 'react';
import './App.css';
import BooksPage from './containers/Books';
import { Switch, Route } from 'react-router-dom';
import HomePage from './containers/Home';

class App extends Component {
	render() {
		return (
			<div className="App App-header">
				<Switch>
					<Route exact path="/" component={HomePage} />
					<Route exact path="/books" component={BooksPage} />
				</Switch>
			</div>
		);
	}
}

export default App;
```
