React Tutorial- React Router DOM Set Up A New Base URL In React Example

In this React tutorial, we will learn how to add, create or set up a new base URL in React app using the Router DOM version 6 library.

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.

 

React Router DOM Set Up A New Base URL In React

Step 1- Build A New Application

In the first step, we will use the given command for building a new React app:

npx create-react-app react-blog-app

Now, we will enter into the project’s root:

cd react-blog-app

 

Step 2- Create The Function Component

Now, we will be creating the functional components/ which are quite easy to create and manage.

We make the components/Home.js file with the following code:

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

Afterward, we build the components/Profile.js file with the given code:

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

Here, we will make the components/Contact.js file and use the given code:

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

 

Step 3- Set Up React Router DOM

This will be the main module to help us set up the base URL. Hence, we need to run the below command:

npm i react-router-dom

 

Step 4- Define New Routes

Here, in this step, we will set up new Routes for which we have to navigate to the components folder. We 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;

 

Step 5- Create Link Components

Further, we will navigate to the App.js component after which we place the given code.

We need to import the Nav module and 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;

 

Step 6- Create The New Base URL

In order to change the base path in React, we have to ensure that we 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>
);

 

Step 7- View The App On The Browser

Since we have reached the final step of the tutorial, we will now run the app on the browser by using the given command:

npm start

 

Conclusion

In this React tutorial, we have learned how to add, create or set up a new base URL in React app using the Router DOM version 6 library.