How to Set Base URL in React with React Router DOM

React set base URL example. A base URL is a stagnant string path that can be seen in the browser’s address bar. Theoretically, it is a common prefix used to allow navigation within a web application.

Seldom we have to add a new base URL in React. This is done to serve the app from a different URL. If you are new to React, a question arises about how to set the new base path in React.

In this step-by-step tutorial, we will teach you how to set a base path or base URL in a React application using React Router DOM v6.

Router DOM is an independent library that helps you enable routing in a React application. Router dom library proclaims to make the navigation happen between components.

Install React Project

We are going to use Create React App tool to install a new React application. Hence run the given command to create the project.

npx create-react-app my-react-app

Move inside the project folder.

cd my-react-app

Install Router Dom

To set up the routing in React; make sure to execute the following command from the terminal screen.

npm install react-router-dom

Create Component Files

We need to create couple of components, therefore make the features/ folder inside the src/ folder.

Next, create and add the code into the features/Home.js file:

import React from 'react'

function Home() {
  return (
    <div>Home Page</div>
  )
}

export default Home

Next, create and update the given code into the features/Blog.js file:

import React from 'react'

function Blog() {
  return (
    <div>Blog Page</div>
  )
}

export default Blog

Now, create and insert the following code within the features/Product.js file:

import React from 'react'

function Product() {
  return (
    <div>Product Page</div>
  )
}

export default Product

Create Routes with Router DOM

In the next step, we have to create the Menu.js file in the features/ folder.

Import all the components, then import the Routes and Route modules. We will wrap the Route using the Routes module, then, within the Route module, pass the component in the element tag and set the path name.

import Home from "./Home";
import Product from "./Product";
import Blog from "./Blog";
import { Routes, Route } from "react-router-dom";

const Menu = () => {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/product" element={<Product />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </div>
  );
};

export default Menu;

Update Global Component

Now, you need to open the App.js file and put all the given code into the file.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Menu from "./features/Menu";
import { Link } from "react-router-dom";

const App = () => {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Add Base Path Example</h2>
      <nav>
        <Link className="nav-link link-primary" to="/">
          Home
        </Link>
        <Link className="nav-link link-primary" to="blog">
          Blog
        </Link>
        <Link className="nav-link link-primary" to="product">
          Product
        </Link>
      </nav>
      <div className="mt-5">
        <strong>
          <Menu />
        </strong>
      </div>
    </div>
  );
};

export default App;

Set Base URL with Router DOM v6

To add the base path, head over to index.js file. In this file, import the BrowserRouter from the “react-router-dom” package.

Next, wrap the App component using BrowserRouter module. At the same time you have to pass the basename property and set the base path name.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter basename="/remotestack">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Start Development Server

Ultimately, we are done with the coding part. Now, we have to run the react server using the following command.

npm start

Here is the url with the custozised base url.

http://localhost:3000/remotestack

How to Set Base URL in React with React Router DOM