Rails with React - One Repo - Part 2
Tags: rails, react
Published: 2018-11-14 22:27:51

---
title: Rails with React - One Repo - Part 2
published: true
description: Tutorial series that walks you through creating a Ruby on Rails web application that uses React as its view layer, all in one repository.
tags: rails, react
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j0xrwz8vsxkvc5b4nndy.png
---

## Part 2 of 3: Integrating React Router

### Recap

In [part 1 of this series](https://dev.to/harrymlevine/rails-with-react---one-repo---part-1-3k7o) we covered setting react as the view layer.

All of the code for this series resides at: https://github.com/oddballio/rails-with-react

### Introduction

As we now have the view layer staged, next we will want to be able to visit many different pages in our application, each with their own purpose.  For example:

- a home page
- a page that displays a list of posts
- a page with a form to create a new post

In order to create multiple React components with multiple, unique URLs, we will integrate [React Router](https://www.npmjs.com/package/react-router).

### Create and import new components

Let's create a class component to represent each of these pages, with some boilerplate content.

**1.** Create `app/javascript/components/Home.js`

```jsx
// app/javascript/components/Home.js

import React from 'react'

class Home extends React.Component {
  render() {
    return (
      <div>
        Home page
      </div>
    )
  }
}

export default Home
```

**2.** Create `app/javascript/components/Posts.js`

```jsx
// app/javascript/components/Posts.js

import React from 'react'

class Posts extends React.Component {
  render() {
    return (
      <div>
        Posts page
      </div>
    )
  }
}

export default Posts
```

**3.** Create `app/javascript/components/NewPost.js`

```jsx
// app/javascript/components/NewPost.js

import React from 'react'

class NewPost extends React.Component {
  render() {
    return (
      <div>
        NewPost page
      </div>
    )
  }
}

export default NewPost
```

**4.** Import the components into `App.js`

```jsx
// app/javascript/components/App.js

import React from 'react'
import Home from './Home'
import Posts from './Posts'
import NewPost from './NewPost'

...
```

### Install and import dependencies

**1.** Install [React Router](https://www.npmjs.com/package/react-router) and [react-router-dom](https://www.npmjs.com/package/react-router-dom)

```
$ yarn add react-router
$ yarn add react-router-dom
```

**2.** In `index.js` import the relevant package components

```jsx
// app/javascript/packs/index.js

...
import { BrowserRouter as Router, Route } from 'react-router-dom'
```

### Setup the Router and Routes

Let's integrate the components from these new packages.

**1.** In `index.js`, instead of passing in the `App` component, we'll pass in the package's `Router` component

```jsx
// app/javascript/packs/index.js

...
document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Router>

    </Router>,
    document.body.appendChild(document.createElement('div')),
  )
})
```

**2.** Within the `Router` component, we'll add a `Route` component that establishes a root path, with `App.js` as our root component

```jsx
// app/javascript/packs/index.js

...
    <Router>
      <Route path="/" component={App} />
    </Router>,
```

### Create the routes in the React app

As `App.js` is set as the root component for the router, it will contain all of the individual routes for each component.

**1.** In `App.js`, import the `Route` and `Switch` components from `react-router-dom`

```jsx
// app/javascript/components/App.js

...
import { Route, Switch } from 'react-router-dom'
```

**2.** In `App.js`, establish all of the unique routes within a `Switch` component

```jsx
// app/javascript/components/App.js

...
class App extends React.Component {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/posts" component={Posts} />
          <Route exact path="/new_post" component={NewPost} />
        </Switch>
      </div>
    )
  }
}

export default App
```

### Umbrella Rails route for all React routes

We need to create a catchall route that matches any of the potential routes that might come from our React app, and funnel them to our `pages_controller#index` action.  This being the action that renders our React application.

**Important:**  This `match` route must be the **last** route in `routes.rb` to ensure that it does not mistakenly absorb any other routes.

**1.** In `routes.rb` create the catchall route

```ruby
# config/routes.rb

Rails.application.routes.draw do
  root 'pages#index'

  # IMPORTANT #
  # This `match` must be the *last* route in routes.rb
  match '*path', to: 'pages#index', via: :all
end
```

**2.** Start the rails server with `rails s`
**3.** In a separate tab run the `bin/webpack-dev-server` script

```
$ bin/webpack-dev-server
```

This sets up the real time reloading that is standard with a basic React app.

**4.** Visit `http://localhost:3000/`

You should see "Home page"

**5.** Visit `http://localhost:3000/posts`

You should see "Posts page"

**6.** Visit `http://localhost:3000/new_post`

You should see "NewPost page"

### Next Steps

There is one more tutorial in this series:

[Part 3 of 3: Handling Requests Between React and Rails](https://dev.to/harrymlevine/rails-with-react---one-repo---part-3-nk)