Quick start guide for react router v4 using create-react-app
Tags: createreactapp
Published: 2018-04-26 07:12:47

---
title: Quick start guide for react router v4 using create-react-app
published: true
description: Simple set up of routes and simple page views for create-react-app and react-router 4
tags: createreactapp
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cm9c4zq7r98m95d2s5k8.jpg
---


# Lets jump right into this:
> For the sake of brevity, i'm going to build all pieces of this into `app.js` , but naturally you'll want to separate them.

```terminal
npm install create-react-app /folder-location-of-my-app
```

navigate into the folder and install `react-router-dom` into your `package.json`

`cd ./folder-location-of-my-app` 

`npm install --save react-router-dom`

now that you have react router dom lets open up the default app.js file:

## __app.js__

```javascript
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

```


go down to the render function and and wrap the outer most div in a `<Router>`:

```javascript

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <header className="App-header">
            ...
        </div>
      </Router>
    );
  }
}

```

OKay great now that we have the `Router` in place, lets define Simple Routes:


react router will render our component views in the JSX wherever you decide to place them.

lets place them below the header


```javascript

        ...
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <div>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/code" component={Code} />
            <Route exact path="/contact" component={Contact} />
            <Route exact path="/presence" component={info} />
          </div>
        </div>
      </Router>
     ...

```

Pass in a string of the exact path that you want to route to, and pass in a component to set up each route.


Now that we have routes set up , we need to set up buttons that will 'link' to each route. 

lets create a pure function component and name it `<MainMenu/>`

we can add our menu buttons into the header so they are nice and obvious: 


```javascript
    ...
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
            <MainMenu/>
     </header>
    ...

```


our `<MainMenu/>` component will consist of a series of buttons wrapped by react-routers `<Link/>` component, this turns its children into a link that will change react routers 'state' based on what you pass in with the `to=` prop.


```javascript

const MainMenu = () => {

    <div>
      <Link to="/">
        <button>home</button>
      </Link>
      <Link to="/about">
        <button>About</button>
      </Link>
      <Link to="/code">
        <button>code</button>
      </Link>
      <Link to="/code">
        <button>contact</button>
      </Link>
      <Link to="/info">
        <button>info</button>
      </Link>
    </div>

}

```

Great ! Now that we have our `<Router/>` , `<Route/>` and `<Link/>` in place, the only thing left to do is set up each one of our views:

We can quickly set those up with some more pure functions

```javascript

const Home = () => (
  <div>
    Home
  </div>
)

```


Now our full `app.js` file will look like this:



```javascript
    
    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';


    const Home = () => (
      <div>
        Home
      </div>
    )

    const About = () => (
      <div>
        About
      </div>
    )

    const Code = () => (
      <div>
        Code
      </div>
    )

    const Contact = () => (
      <div>
        Contact
      </div>
    )

    const info = () => (
      <div>
        info
      </div>
    )

const MainMenu = () => {
  return (
    <div>
      <Link to="/">
        <button>home</button>
      </Link>
      <Link to="/about">
        <button>About</button>
      </Link>
      <Link to="/code">
        <button>code</button>
      </Link>
      <Link to="/contact">
        <button>contact</button>
      </Link>
      <Link to="/info">
        <button>info</button>
      </Link>
    </div>
  );
};

    class App extends Component {
      render() {
        return (
          <Router>
            <div className="App">
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Welcome to React</h1>
                <MainMenu />
              </header>
              <div>
                <Route exact path="/" component={AppViews.Home} />
                <Route exact path="/about" component={AppViews.About} />
                <Route exact path="/code" component={AppViews.Code} />
                <Route exact path="/contact" component={AppViews.Contact} />
                <Route exact path="/presence" component={AppViews.Presence} />
              </div>
            </div>
          </Router>
        );
      }
    }

    export default App;
```



Your app should look like this now:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/mzt5oyshn1ltqlyk2ezs.gif)

####

References: 


- [react-router-docs](https://reacttraining.com/react-router/web/guides/quick-start)




## Happy Building!