With React Router, you can create multiple routes to determine which component should render based on the link that was clicked. If you’re building a single-page application, you should use React Router to render specific components that act like separate pages — making it look like your website is made up of more than one page. Let’s go through an example.
First, let’s make sure you have Node installed. If not, follow these instructions.
Create Your React App
We will use
create-react-app to create a travel blog website and use React Router. Here is the full repo to follow along.
You should automatically be routed to
localhost:3000 unless you have something else running on that port. You should see the default React app template.
Create Your Paths and Routes with React Router
Now, let’s set up our
App.js file. First, we are going to create a list of links: Home, About, and Users.
Next, we need to add a separate
<Route> for each page. Think of this as different URLs for each link. Although we are making a single page application, we will still have different links for different parts of the app. Let’s add a path that will correspond to each of our links and wrap them all in a
<Switch> looks through its children’s Routes and renders the first one that matches the current URL:
Insert Your Components
Notice in each path, we have the corresponding component. Then, we need to add content to our components. In this example, I am using the rebass component library, but feel free to use any component library you like. We are going to create three different cards for each of the links:
CuisineCard, which will each be the main component of the different pages. First, I import the component from rebass, choose an image to be in the card, and then add it to my
We are going to duplicate the HomeCard to create the AboutCard and the CuisineCard. Go ahead and choose an image for each.
You can add more text if you like, or more cards.
Add Feature Flags to Your React App
Let’s say I only wanted certain users to have access to my travel blog, because I am going to add personal pictures with my friends and family. Using feature flags is a great way to target specific users and make sure only the intended userbase sees your app or feature. To download Split, sign up for a free developer account.
Then, find the Create a Split button on the left panel of the homepage. Enter a name for your flag that you will later input into your code. Then, select a treatment type. The treatment differentiates the people who see your app and the people who don’t. In this case, select user because you want to segment a group of users to be able to see your personal travel photos.
Next, it’s time to add your targeting rules. In the
Set Targeting Rules section, enter the email addresses of the users who should see the app, while keeping the default off.
You’ll then want to enter the API key from the UI and insert that into your
sdkConfig in your component.
React Router to the Rescue
React Router is a great way to build single-page applications because you prevent a page refresh every time a link is clicked. With client-side rendering, the page doesn’t refresh as you navigate through the different links. React Router is easy to understand, and simple to implement!
Learn More About React and Feature Flags
Feature flags give you the ability to roll out your app in a controlled fashion to only the selected population. Here at Split, we don’t write code without them!
- Set Up Feature Flags with React in 10 Minutes
- Set Up Feature Flags with React Hooks
- Testing a Feature Flagged Change