Router Component
The Router component is one which helps in initializing a request handshake between 2 pages or screens. It is a low level api built using the common render prop
reactJs pattern. This low level component does not work on mobile i.e react-native
or any other Javascript based mobile native library except hybrid based i.e Cordova
. This component is quite useful when you are building a web app that requires a screen
to download some contents before pushing the user to the next route. The Router
component is conceptually used in this scenario to instantiate the download before the Push.
Also, the push can be implemented irrespective of the routing library being used. with the Router
component, one could specify that screens should download both the Component
and fetch the queries
which would be displayed on the next screen before actually performing the route. Therefore, in this tutorial, we would be building a very small application which would show the Router
component in action. Let's swing into action to see how this is done.
Building a simple page navigator
In this section, we would be building a very simple page navigator. Our page navigator would consist of 2 screens. The first containing a button which when clicked routes a user to the next screen containing a list of prefetched notifications. In this tutorial, we would be using react-router v4
as our routing library. So Let's go ahead to set up our application from scratch.
Setting up the routes
In this section, we would be setting up the routes for our navigator based application. As stated earlier, we would be making use of react-router v4
as our routing library. We would assume that you are quite familiar with react-router
and therefore skip all the details in explaining the library itself. Please refer to the react-router site if you are not familiar with using the library.
/**
* Index.js
*/
import React from 'react';
import {render} from 'react-dom';
import KunyoraClient from 'kunyora';
import {KunyoraProvider} from 'react-kunyora';
import registerServiceWorker from './registerServiceWorker';
import AppRoutes from './AppRoutes';
const client = KunyoraClient({
baseURL: 'https://kunyora.herokuapp.com/',
nouns: [{path: 'notification', name: 'notification'}],
});
const App = (props) => (
<KunyoraProvider client={client} store={client.store}>
<AppRoutes />
</KunyoraProvider>
);
render(<App />, document.getElementById('root'));
registerServiceWorker();
In the code above, we set up the client of the application using the KunyoraProvider
top level component and KunyoraClient
, please refer to the KunyoraProvider Docs to learn about this component and the Kunyora Docs
for more reference.
/**
* AppRoutes.js
*/
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Initiator from './Initiator';
import Notification from './Notification';
const AppRoutes = (props) => (
<Router>
<Switch>
<Route path="/" component={Initiator} exact />
<Route path="/notification" component={Notification} exact />
</Switch>
</Router>
);
export default AppRoutes;
In the code above, we setup our routes.
Prefetching Data
Let's create the Initiator
screen of our application. This screen would be used in initializing the request using the Router
component.
/**
* Initiator.js
*/
import React from 'react';
import {Router} from 'react-kunyora';
const Initiator = (props) => (
<Router
name="Notification"
loader={() => import('./Notification')}
resources={[{operation: 'getNotification'}]}
onRequestRoute={() => props.history.push('/notification')}>
{(routeState, fetchProgress, push) => (
<button onClick={() => push()}>View Notifications</button>
)}
</Router>
);
export default Initiator;
In the above code sample, we supply a name for our route which is required. If you are code splitting from the route level, then make sure that the Connector
and the Router
both have the same name. The loader
prop is used to prefetch that route before initial route, the resource
prop is used to specify a list of queries to prefetch before routing the user to the next screen. The onRequestRoute
prop should be used to specify a function which would be called when the contents have been downloaded. In our case, we use react-router
to route the user to the next screen.
The parameter specified in the children prop of the Router
component should be used within it to carry out its functionalities. In this case, we pass the push
parameter to the buttons onClick
event.
Rendering Data
Here, we would create the Notification
component which would be used in displaying the notification. We would not go into details in explaining the Query
component, we assume that you are familiar with it, however you can check up the Query Tutorial for more reference.
/**
* Notification.js
*/
import React from 'react';
import {Query} from 'react-kunyora';
const Notification = (props) => (
<Query operation="getNotification">
{(notifications) => {
let component =
notifications.data !== undefined ? (
<ul>
{notifications.data.map((notification, i) => (
<li key={i}>{notification.name}</li>
))}
</ul>
) : null;
return component;
}}
</Query>
);
export default Notification;
Ideally, we are suppose to code split at the route level within the Notification
component using the Connector
component. However, you can check up our series of tutorials for an example of how to achieve this purpose.
Run your application and see the beauty in using the react-kunyora
. Please check out the Router Api reference for an overview of the component.