Add a Base URL to an App Using Redux and React Router
In this guide, you will learn how to set up a base URL in React Router and how to combine Redux seamlessly.
Nov 1, 2020 • 5 Minute Read
Introduction
A primary ingredient in any traditional or single-page app is routing. Routing is the ability to navigate from one page to another. In a typical single-page app, you can use React Router to do the routing for you. But as the app grows and the global state gets complicated, you may need to use a state management library like Redux.
The app may also be running on a different path (https://example.com/app) and not on the root domain, adding additional complexity. In this guide, you will learn how to set up a base URL in React Router and how to combine Redux seamlessly.
React-Router Example
This section covers how to add a base URL in a simple React app using React Router.
Install React-Router
The first step is to install the react-router-dom dependency in your app.
npm i react-router-dom
Configure the Routes
Next, add the page components as routes in the app.
const HomePage = () => {
return (
<div>
<h2>Home</h2>
</div>
);
};
const ContactPage = () => {
return (
<div>
<h2>Contact</h2>
</div>
);
};
const ProfilePage = () => {
return (
<div>
<h2>Profile</h2>
</div>
);
};
Pass the above page components as children to the Route component and wrap with the Switch component from react-router-dom.
import { Route, Switch } from "react-router-dom";
// ...
const Main = () => {
return (
<div className="app">
<Navbar />
<div className="content">
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/contact">
<ContactPage />
</Route>
<Route path="/profile">
<ProfilePage />
</Route>
</Switch>
</div>
</div>
);
};
Adding a Base URL
Import the BrowserRouter component from react-router-dom. The BrowserRouter component has a basename prop, which accepts a string as its value in case the React app is hosted from a sub-directory.
import { BrowserRouter } from "react-router-dom";
const App = () => {
return (
<BrowserRouter basename="/app">
<Main />
</BrowserRouter>
);
};
Adding basename in the BrowserRouter component ensures that all the links in the routes are prefixed with the base URL. For example, <Link to='/contact' /> will be rendered as <a href='/app/contact'>.
Integrating Redux
In this section, you will integrate Redux with the above React Router set up.
The connected-react-router package is recommended by the maintainers of React Router for deeper Redux integration. To install connected-react-router, run the following command.
npm i connected-react-router
Creating the history Object
The history object can be used to change the browser's history session programmatically. To create a history object, import the createBrowserHistory function from the history package and create the object as shown below.
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
The history package is a dependency of react-router-dom, so you don't have to install it again.
Create Router Connected Store
Next, connect the history object to the store. To do that, import the connectRouter helper function from connected-react-router package and provide the created history object.
import { connectRouter } from "connected-react-router";
import { createStore } from "redux";
const reducer = (initialState, action) => {
// ...
};
const store = createStore(connectRouter(history)(reducer));
Adding routerMiddleware to Redux
routerMiddleware will dispatch the history actions to the Redux store. Use the applyMiddleware helper function from redux to include routerMiddleware in the app.
import { connectRouter, routerMiddleware } from "connected-react-router";
import { createStore, applyMiddleware } from "redux";
const store = createStore(
connectRouter(history)(reducer),
applyMiddleware(routerMiddleware(history))
);
Using ConnectedRouter Component
You're almost done. The last step is to use the ConnectedRouter component and pass the history object as a prop. Make sure you wrap the ConnectedRouter component with the Provider component from react-redux.
import { ConnectedRouter } from "connected-react-router";
import { Provider } from "react-redux";
const App = () => {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<BrowserRouter basename="/app">
<Main />
</BrowserRouter>
</ConnectedRouter>
</Provider>
);
};
Conclusion
Redux is a vital component of the React ecosystem, so you need to understand how to integrate React-Router and Redux and how they work together. React Router has an excellent section on deep Redux integration that you may want to read for a better understanding of how things work under the hood.
