Welcome to Part 3 of our API tutorial series for Rails and React!

We enjoy expanding our skills and sharing that knowledge with each other — so we’re bringing you into the fold as well. Ruby on Rails is a fun framework that’s great for database projects that require the extra lift.

Since this is now a regular platform for us, we wanted to provide a tutorial and help anyone new to this dev world. We’re breaking this down into 7 parts, click here to start at the beginning.

Rails Routing Setup

Now that we’ve got our database setup for the necessary models and have created a React Application for the front-end, let’s update our Rails router to always load our React App and handle our routing using the react-router-dom.

First in your app/controllers/application_controller.rb

def fallback_index_html
  render file: 'public/index.html'
end

Next in config/routes.rb we need to add the following code, which forwards routing to our React App for all instances.

get '*path', to: "application#fallback_index_html", constraints: ->(request) do
  !request.xhr? && request.format.html?
end

React Routing Setup

Now that Rails routing is updated, we want to add react-router-dom for our React application.

In the console, run:

yarn --cwd client add react-router-dom

Next, we’ll want to rename our client/src/App.js to client/src/Home.js and update the function name from App to Home.

import './App.css';

function Home() {
  return (
    <div className="App">
      <h1>Our IMDB App</h1>
    </div>
  );
}

export default Home;

Next, we need to create a new client/src/App.js and add the following. At the end of our Switch block, we’ll want to add a catch-all Route to handle 404 errors which we’ll create in the next step.

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Home from './Home'
import NotFound from './NotFound'

class App extends Component {
  render () {
    return <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  }
}

export default App

Handling 404 Errors

Lastly we’ll need to create a component which we referenced in the previous step. You’ll need to create a file in client/components/NotFound.js with the following code:

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

class NotFound extends Component {
  render () {
    return (
      <h1>404: Not found</h1>
      <Button as={Link} to='/'>Back to home</Button>
    )
  }
}

export default NotFound;

We’ll now be able to easily create additional views in our App.js for our React Application. In later parts of the series we’ll create views for our Movies, Actors and Categories that we’ll add to the React Router.

React & Rails API series:

1. Project Setup
2. Relationships
3. Router (this post)
4. Image Upload via S3
5. Send Emails (coming soon!)
6. Search Functionality (coming soon!)
7. Pagination (coming soon!)