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.
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
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.
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.
Require authentication for React router paths
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
We’ve released a major update to React Studio. Update comes up automatically when you open the app.
Load single Firestore document into Data sheet
Firebase plugin is updated to support path to specific document. This means that you can point Data sheet path to…
Add localisation to React app in 5 minutes
React Studio projects have built in localisation feature which is really powerful even though many users don’t even…