App.js

import React from 'react';
import { Link, Route } from 'react-router-dom';

const Nav = () => (
  <ul>
    <Link to="/"><li>Home</li></Link>
    <Link to="/friends/"><li>Friends</li></Link>
    <Link to="/books/"><li>Books</li></Link>
  </ul>
)


const Home = () => <h1>Home</h1>
const Friends = () => <h1>Friends</h1>
const Books = () => <h1>Books</h1>


const App = () => (
  <div>
    <Nav />
    <Route path="/" component={Home} />
    <Route path="/friends/" component={Friends} />
    <Route path="/books/" component={Books} />
  </div>
)


export default App

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

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