React Router Native, a Love Story

Happy Saturday everyone! I hope that your time in quarantine has been productive and not at all depressing. It's that time of the week again where I try to stretch out a one minute blog into a three minutes. So here we go!

I am currently working on an app with my team at school. It is a mobile app that we are using with React Native and Expo, I never had much experience with routing before, so that was a huge reason why I asked to be assigned to set up some of the basic routing for our app. I had our app basically set in a Bottom Tab Navigator, so our files would just route through there, but what about any routing that would need to take place in those tabs? That's where I was stuck. I did some research and I came across the beauty and lifesaver that is React Router Native, and instantly I was in love!

React Router Native is an npm package that makes routing within your app super simple. I was able to understand it and successfully integrate in my app within ten minutes. And trust me, if I can do it, so can you.

First, you'll want to install the package.

npm install react-router-native

After that you can then import from the package, I recommend destructing and grabbing the NativeRouter, Route, and Switch.

import { NativeRouter, Switch, Route } from 'react-router-native';

The Native Router is what you are going to need to wrap your entire routing page in. So everything else you want to route should go in between these two tags.

import React from 'react';
import {NativeRouter, Switch, Route} from 'react-router-native';

export default function RouteScreen(){
  return (
    <NativeRouter>

    </NativeRouter>
  );
}

You can now import any file that you will want to create a route for, just make sure you have the correct paths so you don't crash your app.

You can then use the Route tags inside of the NativeRouter. The Route requires an exact path, and the name of the component that you'll be routing to. Whatever component you want to be routed to first should have a path of "/". The other paths can be named whatever you want, just make sure it's something good because you'll be using it later.

This is an example of what your file should look like so far.

import React from 'react';
import {NativeRouter, Switch, Route} from 'react-router-native';

import MessageScreen from './MessageScreen';
import NewMessageScreen from './NewMessageScreen';

export default function MessageRouteScreen(){
  return (
    <NativeRouter>
          <Route exact path="/" component={MessageScreen}/>
          <Route exact path="/privatemessages" component= 
               {PrivateMessageScreen}
          />
    </NativeRouter>
  );
}

So this Route system will work, but a very important thing that will help you down the road is Switch. Switch will make sure that only one file is rendering out a time. Without this, for some random reason whatever it may be, there may be a scenario where the conditions are met for both pages to render, but switch will prevent this from happening. So let's wrap all of our Routes in Switch.

import React from 'react';
import {View} from 'react-native';
import {NativeRouter, Switch, Route} from 'react-router-native';

import MessageScreen from './MessageScreen';
import PrivateMessageScreen from './PrivateMessageScreen';

export default function MessageRouteScreen(){
  return (
    <NativeRouter>
      <View>
        <Switch>
          <Route exact path="/" component={MessageScreen}/>
          <Route exact path="/privatemessages" component= 
               {PrivateMessageScreen}
          />
        </Switch>
      </View>
    </NativeRouter>
  );
}

So now we have a working router! Now we just need to create functions in our components that will allow us to access these routes.

In my example, I will go to my initial route, MessageScreen, and do two things. I will pass down history in my function initialization. TLDR this will allow us to route to our other pages.

export default function MessageScreen({ history }) 

So now that we can access history, let's create a button that will send us to the private message screen! We are going to call history.push, and then the name of whatever route we want to render to.

<Button
title="Send me to PrivateMessageScreen!"
onPress={() => history.push("/privatemessages")}
/>

And then in PrivateMessageScreen you can just create a button that sends you back! It's that simple.

And that's how you can set up a simple router with react-native-router. I hope it helped!