Understanding the Core Router, and Configuring the BrowserRouter and HashRouter components

The React-Router library provides several components that address various use cases, such as adding navigation links with <Link> and <NavLink>, redirecting the user using the <Redirect> component, and so on. The <BrowserRouter> component wraps the application's root component (<App />) and enables these components to interact with the history object. When the application initializes, the <BrowserRouter> component initializes the history object and makes it available to all its child components using React's context.

Routing in a single-page application is not really routing; rather, it's conditional rendering of components. The <BrowserRouter> component creates the history object, and the history object has methods such as push, replace...

<Router> component

As previously mentioned, React-Router provides various Router implementations:

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>
• <StaticRouter>
• <NativeRouter>

These Routers make use of a low-level interface—<Router>. The <Router> component is part of the core react-router package, and the functionality provided by the <Router> interface is extended by these Router implementations.

The <Router> component accepts two props—history and children. The history object can be a reference to the browser's history or it can be the application's history maintained in memory (which is useful in native applications where an instance of browser's history is not available). The <Router> component accepts one child component, which is generally the application's root component....

<BrowserRouter> component

The <BrowserRouter> component was discussed briefly in the first chapter. As the name suggests, the <BrowserRouter> component is used in browser-based applications and it uses HTML5's history API to keep the UI in sync with the browser's URL. Here, we take a look at how the component creates a history object for the browser environment and provides this history object to the <Router>.

The <BrowserRouter> component accepts the following props:

static propTypes = {
    basename: PropTypes.string,
    forceRefresh: PropTypes.bool,
    getUserConfirmation: PropTypes.func,
    keyLength: PropTypes.number,
    children: PropTypes.node
};

Similar to the <Router> interface, the <BrowserRouter> accepts only one child component (usually the application's root component). The children prop mentioned in the preceding...

<HashRouter> component

The <HashRouter> component is part of the react-router-dom package, and, similar to <BrowserRouter>, it's also used in building applications for the browser environment. The primary difference between <BrowserRouter> and <HashRouter> is the URL that the component creates:

A <BrowserRouter> creates a URL as follows:

www.packtpub.com/react-router

Whereas the <HashRouter> adds a hash to the URL:

www.packtpub.com/#/react-router

The <BrowserRouter> component leverages the HTML5 History API to keep track of the router history, whereas the <HashRouter> component uses window.location.hash (the hash portion of the URL) to remember the changes in the browser's history stack. The <BrowserRouter> should be used in building applications that work on modern browsers that support the HTML5's History...

Summary

The <Router> component in the react-router package provides a low-level implementation of the router interface. Various routers in react-router-dom and react-router-native use this low-level <Router> interface to provide routing features for the given environment. The history prop in <Router> is used to specify the history object for the given environment. For example, the <BrowserRouter> component uses history/createBrowserHistory to create a history object in the browser environment. All the Router components accept only one child, and it's usually the application's root component.

The BrowserRouter component in react-router-dom makes use of the HTML5 history API to keep the application's URL in sync with the browser's history. It accepts props—basename, keyLength, forceRefresh, and getUserConfirmation. The <HashRouter...