React 18 Router Set Up New Base URL Example Tutorial

Throughout this extensive tutorial, we will teach you how to add, create or set up a new base URL in React app using the Router DOM v6 library.

In this guide, we will throw light on following concepts: how to set up a base URL in React using React Router v6 package.

We will show you how to create simple page routes or URLs that will help you navigate from one page to another page in in React js application.

A base URL is a base or a consistent web location or address of your website.

For example, when you check the www.positronx.io on the browser, it is the base url. And anything that comes after the positronx.io becomes the URL path.

We will use React Router DOM to specify the base URL in React. Router DOM is a popular library available through the npm package registry.

It helps set up dynamic routing in a React web app.

It authorizes a user to show web pages and enables users to navigate between the web pages with the client and server-side routing in React.

Build New Application

React CRA is a generic yet best way to create a new React app globally.

Here is the command that helps you develop a new React app.

npx create-react-app react-blog-app

To manage the base url, make sure to enter into the project’s root.

cd react-blog-app

Create Function Component

In React, functionalities can be created with the class as well as functional components/. Function components are easy to create and manage; therefore, make the components folder.

Make the components/Home.js file with the following code.

import React from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default Home

Then, build the components/Profile.js file with the suggested code.

import React from 'react'
function Profile() {
  return (
    <div>Profile</div>
  )
}
export default Profile

Now, make the components/Contact.js file, and put the suggested code in the file.

import React from 'react'
function Contact() {
  return (
    <div>Contact</div>
  )
}
export default Contact

Set Up React Router Dom

React Router DOM is a standard package to set up routes and url that helps you navigate within the app.

This will be the main module to help us set up the base URL, hence run the suggested command.

npm i react-router-dom --legacy-peer-deps

Define New Routes

As we said earlier, Routes allow us to navigate within the app.

In order to set up or create new Routes, we have to navigate to the components folder; here, create the Nav.js file

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";
import Contact from "./Contact";
const Nav = () => {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};
export default Nav;

We added function components and Router DOM: Routes and Route modules.

The Routes modules offer a container for a nested tree of elements that renders the branch that best matches the current location.

The Route module is used to declare an element that should be rendered at a certain URL path.

Create Link Components

Navigate to App.js component then place the following code.

You have to import the Nav module and the Link module. The Link API is a public API for rendering a history-aware.

Also, it enables navigating to the associated, linked component or page.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import Nav from "./components/Nav";
const App = () => {
  return (
    <div className="container">
      <h2>React Configure Base Path Example</h2>
      <div className="mb-5">
        <Link className="nav-link link-danger" to="/">
          Home
        </Link>
        <Link className="nav-link link-danger" to="profile">
          Profile
        </Link>
        <Link className="nav-link link-danger" to="contact">
          Contact
        </Link>
      </div>
      <div>
        <h3>
          <Nav />
        </h3>
      </div>
    </div>
  );
};
export default App;

Create New Base URL

To change the base path in React, ensure that you have added the basename to the BrowserRouter module in the index.js file.

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="/positronx">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

View App on Browser

We will finally test the app on the browser and make sure the base path is changed. We are now going to run the npm start command from the console.

npm start

You can use the new base path that is given here.

http://localhost:3000/positronx

Conclusion

Apart from adding a new base URL in React with React Router DOM. You can use the Router DOM package to set up new routes and URLs to traverse between the web pages.