Configuring Routes - Using Various Options in the Route Component

React-Router allows you to declaratively define routes using the <Route> component. It's the main building block of React-Router, and renders the component mentioned in the component prop when the path value mentioned in the path prop matches the browser's URL location. The <Route> component, like any other React component, accepts a set of props. These props provide more granular control over how the browser's URL path should match the <Route> component's path, and a couple of other rendering options as well.

In the previous chapter, we briefly saw how a <Route> component is used to match the URL path and render a component. In this chapter, we will take a look at the following:

• A deep dive into various props that can be added to a <Route> component, such as exact...

Route props

When you look at the source code of React-Router, the <Route> component accepts the following props:

Route.propTypes = {
    computedMatch: PropTypes.object, // private, from <Switch>
    path: PropTypes.string,
    exact: PropTypes.bool,
    strict: PropTypes.bool,
    sensitive: PropTypes.bool,
    component: PropTypes.func,
    render: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    location: PropTypes.object
};

Let's take a look at each of these props in the following section.

The exact prop

In our previous <Route> example, let's change the '/home' route path to '/', as shown here:

<div className="container">
 ...

Route component props

The component that gets rendered when the <Route> path matches the browser's URL path receives certain props, such as history, location, match, and staticContext. The data provided by these props includes information pertaining to the route. The props are available to the component that gets rendered using the component, render, or children props of the <Route> component.

The staticContext property is set when you are rendering the application on the server side and it is not available (as in, set to undefined) in the client-side router that is, when using the <BrowserRouter> interface. Server-side rendering of the application is covered in the upcoming chapters.

History

React-Router...

Route parameters

A <Route> component in React-Router can be configured to accept URL parameters that change for a given object. For example, to display user information for a given userID, the URL path could look like '/user/1' for a user with a userID of '1', and '/user/123' for a user with a userID of '123'. The last portion of the URL is dynamic; however, in each instance, the rendered component would perform the same operation for a given userID.

An example of such a use case is Twitter's profile page. The page accepts twitterID and displays the feed for the given user.

A <Route> component can be configured to accept the dynamic portion in the URL by appending an additional path in the 'to' prop, prefixed with a colon (:) as seen here:

<Route
    to='/github/:githubID'
    component={GitHubComponent...

Nested routes and dynamic routing

The earlier versions of React-Router required the routes to be defined upfront, and the child routes to be nested inside another route, as seen here:

<Router>
    <Route path='/' component={Container}>
        <IndexRoute component={Home} />
        <Route path='user' component={User}>
            <IndexRoute component={Twitter} />
            <Route path='instagram' component={Instagram} />
        </Route>
    </Route>
</Router>

This code can be considered static routing, wherein the route configuration is required by the library when the application initializes. Here, the route with the '/' path serves as the parent of all the routes, and the route with the 'user' path is a child route of '/', and a parent route for the route with the ...

Dynamic routes from JSON

A set of <Route> components can also be generated by looking up an array containing a collection of route configuration options. Each route option should contain the necessary details, such as 'path' and 'component'.

A collection of routes could look like the following:

const STOCK_ROUTES = [
    {
        path: 'stats',
        component: StatsComponent,
    },
    {
        path: 'news',
        component: NewsComponent
    },
    {
        path: 'trending',
        component: TrendingComponent
    }
];

Each object in the preceding array contains a 'path' key specifying the route path, and a 'component' key containing a reference to the component that you want to render when the user visits the route. The preceding collection can then be used inside the component's render method to...

Summary

In this chapter, we learned that the <Route> component can be configured using various props. This includes using the exact prop to render a component only when the browser's URL path matches the value mentioned in the <Route> component's path; using the strict prop in a <Route> component to ensure that the URL path matches the trailing slash mentioned in the path prop; including the sensitive prop to make the path prop value case-sensitive; and using the render and children props for inline rendering. The <Route> component with the children prop renders irrespective of the value specified in the path prop. This is useful in cases where you have several view components in the page layout and these should be rendered irrespective of the value specified in the path prop.

The component rendered as a result of the <Route> path match...