This video was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Enroll now to view this video

Lesson code -

We’ve done a lot in this module, so let’s do a quick recap.

We’ve learnt to use React Router so that we can build a single page app with multiple routes for viewing, editing and deleting records.

Instead of loading a fresh page, when a user clicks on links, we render the component for the route and fetch the necessary data using AJAX calls.

We added 4 routes:

  • The AppHeader, with the app title and link to the homepage which is shared on all of the routes.

  • The homepage route with the Appointments component.

  • And we added a show route and an edit route.

We can click on an appointment title to view it on its own page.

[screenshot 0:45]

We can go to the editing page for an appointment, which shows the appointment form with the details for that appointment filled in.

And we can change and update the appointment or delete it.

One big change we made was that we split our state management between the Appointments component and AppointmentForm component.

[screenshot 1:05]

We used to have it all in the Appointments component.

But that wasn’t convenient when we wanted to reuse the AppointmentForm component for our editing route.

So we moved the form related state to AppointmentForm and only left the Appointments state data in the Appointments component.

That also helped reduced the number of props we needed to pass to the AppointmentForm component.

In order to get all our new functionality working, we also had to add corresponding actions in Appointments controller.

There’s one other thing I want to fix. If I go to an individual appointment route and reload it, I just see the JSON.

[screenshot 1:48]

That’s because we haven’t specified what to render for the HTML format.

So let’s fix that.

Let’s add a respond_to block and add format.html render index just like we do for the edit action.

def show
   @appointment = Appointment.find(params[:id])
      respond_to do |format|
        format.html { render :index }
        format.json { render json: @appointment }

And then format.json render JSON appointment

Now if I refresh, the page loads fine.

That is React Router.

This lesson was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Get the full course

You're viewing a lesson from an old course. Click here to get access to the new version.