Project Structure
After creating components, the project structure will look like this
After installing dependencies/package package.json file looks like this,
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
Example: Here, is the code of the App.js file where We are going to implement the react-router-dom package.
Javascript
// Filename - App.js import "./App.css" ; // importing components from react-router-dom package import { BrowserRouter as Router, Routes, Route, Navigate, } from "react-router-dom" ; // import Home component import Home from "./components/Home" ; // import About component import About from "./components/About" ; // import ContactUs component import ContactUs from "./components/ContactUs" ; function App() { return ( <> { /* This is the alias of BrowserRouter i.e. Router */ } <Router> <Routes> { /* This route is for home component with exact path "/", in component props we passes the imported component*/ } <Route exact path= "/" element={<Home />} /> { /* This route is for about component with exact path "/about", in component props we passes the imported component*/ } <Route path= "/about" element={<About />} /> { /* This route is for contactus component with exact path "/contactus", in component props we passes the imported component*/ } <Route path= "/contactus" element={<ContactUs />} /> { /* If any route mismatches the upper route endpoints then, redirect triggers and redirects app to home component with to="/" */ } { /* <Redirect to="/" /> */ } <Route path= "*" element={<Navigate to= "/" />} /> </Routes> </Router> </> ); } export default App; |
Javascript
// Filename - Home.jsx import React from "react" ; // Importing Link from react-router-dom to // navigate to different end points. import { Link } from "react-router-dom" ; const Home = () => { return ( <div> <h1>Home Page</h1> <br /> <ul> <li> { /* Endpoint to route to Home component */ } <Link to= "/" >Home</Link> </li> <li> { /* Endpoint to route to About component */ } <Link to= "/about" >About</Link> </li> <li> { /* Endpoint to route to Contact Us component */ } <Link to= "/contactus" >Contact Us</Link> </li> </ul> </div> ); }; export default Home; |
Javascript
// App.jsx import React from "react" ; const About = () => { return ( <div> <h1>About Page</h1> </div> ); }; export default About; |
Javascript
// Filename - ContactUs.jsx import React from "react" ; const ContactUs = () => { return ( <div> <h1>Contact Us Page</h1> </div> ); }; export default ContactUs; |
Step to run the application: Open the terminal and run the following command.
npm start
Output: This output will be visible on https://localhost:3000/ on browser
How to redirect to another page in ReactJS ?
Redirect to another page in React JS refers to navigating to different components in the single page react app using the react-router-dom package. To switch between multiple pages react-router-dom t enables you to implement dynamic routing in a web page.