React-Router Types Explained: Safe Routing Made Simple

Routing plays a big role in navigation for a React app. With React Router, you can have client-side routing and smooth page transitions without needing a full page reload. Knowing the different react-router types helps when setting up navigation in your app.

This blog covers the different types of React Router, along with clear definitions to make things easy to understand.

What is a React Router?

React Router is a package designed to handle navigation in a React application. Instead of traditional multi-page apps that require full page reloads, React Router enables smooth navigation between routes while preserving state.

This library is built on declarative programming principles, where navigation is defined through components instead of manually controlling browser history.

Installing React Router

Before exploring React router types, install the package using:

1npm install react-router-dom

​

The react-router-dom package includes essential components such as:

• <BrowserRouter> – Manages history and provides routing context.

• <Routes> – Defines a set of routes.

• <Route> – Represents individual route configurations.

Types in React Router

Understanding the types of React Router supports is crucial for implementing safe navigation. Here are the key React router types:

1. BrowserRouter (Recommended)

BrowserRouter utilizes the HTML5 History API (pushState and replaceState). It provides clean URLs without hash symbols (#).

Code Example:

1import { BrowserRouter, Routes, Route } from "react-router-dom";
2import Home from "./Home";
3import About from "./About";
4
5function App() {
6  return (
7    <BrowserRouter>
8      <Routes>
9        <Route path="/" element={<Home />} />
10        <Route path="/about" element={<About />} />
11      </Routes>
12    </BrowserRouter>
13  );
14}
15
16export default App;

​

2. HashRouter

HashRouter uses URL fragments (e.g., example.com/#/about). It is useful for applications that do not support server-side routing.

1import { HashRouter, Routes, Route } from "react-router-dom";
2
3function App() {
4  return (
5    <HashRouter>
6      <Routes>
7        <Route path="/" element={<Home />} />
8        <Route path="/about" element={<About />} />
9      </Routes>
10    </HashRouter>
11  );
12}

​

3. MemoryRouter

This router does not interact with the browser’s address bar. It is mainly used for testing or mobile applications.

1import { MemoryRouter, Routes, Route } from "react-router-dom";
2
3function App() {
4  return (
5    <MemoryRouter>
6      <Routes>
7        <Route path="/" element={<Home />} />
8        <Route path="/about" element={<About />} />
9      </Routes>
10    </MemoryRouter>
11  );
12}

​

4. StaticRouter

This router is primarily used for server-side rendering (SSR). It takes a location prop instead of relying on the browser’s URL.

1import { StaticRouter } from "react-router-dom/server";
2
3const context = {};
4const app = (
5  <StaticRouter location="/about" context={context}>
6    <Routes>
7      <Route path="/" element={<Home />} />
8      <Route path="/about" element={<About />} />
9    </Routes>
10  </StaticRouter>
11);

​

5. Router with Custom History

For advanced use cases, a router can be configured with a custom history object.

1import { unstable_HistoryRouter as HistoryRouter, Routes, Route } from "react-router-dom";
2import { createBrowserHistory } from "history";
3
4const history = createBrowserHistory();
5
6function App() {
7  return (
8    <HistoryRouter history={history}>
9      <Routes>
10        <Route path="/" element={<Home />} />
11        <Route path="/about" element={<About />} />
12      </Routes>
13    </HistoryRouter>
14  );
15}

​

Understanding Routes in React Router

Defining Routes

The <Routes> component is used to group multiple route definitions. Each <Route> specifies a path and an element.

Example:

1<Routes>
2  <Route path="/" element={<Home />} />
3  <Route path="/about" element={<About />} />
4</Routes>

​

Route Parameters

Dynamic parameters can be passed to routes using :param.

1<Route path="/user/:id" element={<UserProfile />} />

​

Extract parameters using useParams():

1import { useParams } from "react-router-dom";
2
3function UserProfile() {
4  const { id } = useParams();
5  return <h1>User ID: {id}</h1>;
6}

​

Nested Routing

How Nested Routes Work

Nested routes allow hierarchical navigation. Define child routes inside a parent route.

1<Routes>
2  <Route path="dashboard" element={<Dashboard />}>
3    <Route path="profile" element={<Profile />} />
4    <Route path="settings" element={<Settings />} />
5  </Route>
6</Routes>

​

The Outlet component renders child routes inside the parent component.

1import { Outlet } from "react-router-dom";
2
3function Dashboard() {
4  return (
5    <div>
6      <h1>Dashboard</h1>
7      <Outlet />
8    </div>
9  );
10}

​

Lazy Loading Routes

To improve bundle size, use lazy loading for routes.

1import { lazy, Suspense } from "react";
2import { BrowserRouter, Routes, Route } from "react-router-dom";
3
4const Home = lazy(() => import("./Home"));
5const About = lazy(() => import("./About"));
6
7function App() {
8  return (
9    <BrowserRouter>
10      <Suspense fallback={<div>Loading...</div>}>
11        <Routes>
12          <Route path="/" element={<Home />} />
13          <Route path="/about" element={<About />} />
14        </Routes>
15      </Suspense>
16    </BrowserRouter>
17  );
18}

​

Common Mistakes in React Router

1. Forgetting to Wrap in a Router

A common mistake is using <Routes> without a router.

Incorrect:

1<Routes>
2  <Route path="/" element={<Home />} />
3</Routes>

​

Correct:

1<BrowserRouter>
2  <Routes>
3    <Route path="/" element={<Home />} />
4  </Routes>
5</BrowserRouter>

​

2. Using BrowserRouter Without a Server-Side Config

If the server does not redirect unknown routes to index.html, refreshing will cause a 404 error.

3. Incorrectly Using Route Parameters

Incorrect:

1<Route path="/user" element={<User />} />

​

Correct:

1<Route path="/user/:id" element={<User />} />

​

Choosing the Right React Router Type

Understanding the different types of React Router helps you decide which one fits your project best. Each type has specific strengths and use cases, depending on your application's environment and requirements.

When to Use Each Type

• BrowserRouter – Ideal for modern web applications where clean URLs and server-side routing are supported. It uses the HTML5 history API, making it SEO-friendly and suitable for public-facing apps.

• HashRouter – Best for legacy browsers, non-browser environments (like Electron), or when server configuration is not possible. It tracks the route using the URL hash, making it independent of server-side routing.

• MemoryRouter – Suitable for testing or non-browser environments where there's no need to sync with the browser's address bar. It stores the history in memory rather than in the URL.

Wrapping Up: Choosing the Right React Router Type

Knowing react-router types helps you build smooth and stable navigation in your app. Choosing between BrowserRouter, HashRouter or MemoryRouter depends on your project and user experience.

Using the right router will prevent routing issues and improve the app flow. A good routing setup makes it easier to manage state and handle user interactions without being lost.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.