Create a Single Page Application with React and React Router

JavaScript devs have tons of options today, and React holds its place as a leading library because it’s so easy to use and tool-rich. Creating and building a React app has never been easier, especially with React Router. React Router conditionally renders specific components to display depending on the route that you use in the URL.

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.

Prerequisites

First, let’s make sure you have Node installed. If not, follow these instructions.

You’ll also want to sign up for a free developer account with Split if you haven’t already. Split is a feature flagging and experimentation platform that we will be using in our app. Later on, you’ll incorporate our JavaScript SDK with your app.

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.

npx create-react-app react-router-blog-example
cd react-router-blog-example
npm start

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.

<ul>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/about">About</Link>
  </li>
  <li>
    <Link to="/cuisine">Cuisine</Link>
  </li>
</ul>

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>. A <Switch> looks through its children’s Routes and renders the first one that matches the current URL:

<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/cuisine">
    <Cuisine />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>

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: HomeCard, AboutCard, and 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 App.js file:

class HomeCard extends React.Component {
  render() {
    return (
      <Box width={500}>
        <Card
          sx={{
            p: 1,
            borderRadius: 2,
            boxShadow: "0 0 16px rgba(0, 0, 0, .25)",
          }}
        >
          <Image src={image} />
          <Box px={2}>
            <Heading as="h3">Talia's Travels</Heading>
            <Text fontSize={0}>Bon Voyage!</Text>
          </Box>
        </Card>
      </Box>
    );
  }
}

export default HomeCard;

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

To stay up to date with all of our content, be sure to follow us on Twitter and subscribe to our YouTube Channel!

Switch It On With Split

The Split Feature Data Platform™ gives you the confidence to move fast without breaking things. Set up feature flags and safely deploy to production, controlling who sees which features and when. Connect every flag to contextual data, so you can know if your features are making things better or worse and act without hesitation. Effortlessly conduct feature experiments like A/B tests without slowing down. Whether you’re looking to increase your releases, to decrease your MTTR, or to ignite your dev team without burning them out–Split is both a feature management platform and partnership to revolutionize the way the work gets done. Schedule a demo to learn more.

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.