React Router is here!

We’re excited to announce that we’ve added React Router to React Studio code generation. No more “lost pages” when user clicks browser back button and welcome url parameters! React Router code generation is available in React Studio Version 1.7.15 (383).

You’ll get the update automatically when you open the app. Install React Studio free from www.reactstudio.com. For older projects you need to regenerate the code to make your app fully react router compatible.

P.S. In case you’r using Firebase on your project you need to update the Firebase plugin to latest version (version 22 or higher) to make it work with Router. Find the Plugin update from Studio’s top menu -> Plugins -> Plugin manager.

But how does it work?

By default every screen has one route which is the name of the screen. You can change the route path by selecting the screen and changing paths in Screen settings. Note that one screen can have multiple paths.

friendlyeats and restaurant paths point to same screen

In the screenshot above you’ll see that “restaurants” screen renders in two paths; ‘friendlyeats’ and ‘restaurants’. When you point your browser to either one the same screen is rendered.

React Router parameters

Set parameters by selecting the screen from project map and access screen settings on the right.

Passing parameters trough url is common way to “deep link” into app. In React Studio we’ve figured this so that you can “load” parameters into Data slots. This way you can point link directly into details view screen and make necessary queries into backend to get the right data in place.

In this example the url is set to restaurantdetails screen and contains two parameters; restaurant id (‘jT41nyz2ASdGDRidOemt’) and language code (‘fi’).

Now if we change the language code from Finnish to English (‘fi’ -> ‘en’) the ds_activeLang data slot updates and new translations to static UI elements are being fetch from Localisation sheet Data sheet.

App.js

This is an example path which Design compiler generates to App.js from Studio. It’s pretty clear and self-explanatory.

Go to.. Interaction

You can set the routing parameters in Go to interaction. Just set which data slot or prop is linked to which parameter and the go to interaction will generate url with your parameters in place.

404 — Page not found

“Oops, something went wrong and the page you’re looking for is not found”

You’ve probably seen this error screen somewhere on the web. This happens when the user tries to browse your app with url which does not exist. You can specify “404 page” from App settings.

Create standard screen and add it as “404 page”.

Require authentication for React router paths

Select screen and choose login gate under Authentication setting

If your app is using login then you probably don’t want users to be able to load screens without authentication. Find the Authentication setting under Screen settings. Just select the Login gate from a dropdown menu and code checks the authentication every time user loads the path. Note that this is not enough to make your app secure. You still need to have security rules on your backend.

Other interesting stories about React Studio

React Studio update 173

Load single Firestore document into Data sheet

Add localisation to React app in 5 minutes

The easiest way (by far!) to build a real React + Firebase web app