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.

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

<div className="container">
 ...

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.

React-Router...

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...

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 ...

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...

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...