Steps to Create the React App
Step 1: Set up React project using the command
npx create-react-app client
Step 2: Navigate to the project folder using
cd client
Step 3: Installing the required packages:
npm install react-router-dom
Example: Create the required files and write the following code.
// App.js
import React from "react";
import { HashRouter, Route, Routes, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
const App = () => {
return (
<HashRouter>
<nav>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</HashRouter>
);
};
export default App;
// ./pages/Home.js
export default function Home() {
return <div>Home Page</div>;
}
// ./pages/About.js
export default function About() {
return <div>About Page</div>;
}
Output
HashRouter in React Router
React Router is a library in React JS (Frontend Framework). It is commonly used for handling the navigation and routing in a web application.
In this post, we will learn about the “HashRouter” component provided by the React Router library.
Table of Content
- What is HashRouter?
- Features of HashRouter
- Difference Between HashRouter and BrowserRouter