React Router is Different from Conventional routing
React Router, a declarative and modular library for React, simplifies routing by specifying route appearance rather than navigation details. Its modularity allows selective feature usage, enhancing efficiency. Additionally, React Router’s asynchronous nature supports on-demand loading of routes, promoting responsiveness, and its composable design enables the creation of intricate routes by combining multiple components.
Example: Now we are going to use React router to add routing in our app. For this, we will create a new ‘pages’ directory in our ‘src’ folder. Inside this newly created directory, we will create two JavaScript files ‘Home.js’ and ‘Data.js’ with the below content.
Javascript
import ReactDOM from "react-dom";import { BrowserRouter, Routes, Route } from "react-router-dom";import Data from "./pages/Data";import Home from "./pages/Home";export default function App() { return ( <BrowserRouter> <Routes> <Route exact path="/" element={<Home />} /> <Route path="/data" element={<Data />}> </Route> </Routes> </BrowserRouter> );}ReactDOM.render(<App />, document.getElementById("root")); |
Javascript
import React from 'react'import { Link } from "react-router-dom";export default function Home() { return ( <> <div>Home - w3wiki</div> <Link to="/data">Data</Link> </> )} |
Javascript
import React from 'react'import { Link } from "react-router-dom";export default function Data() { return ( <> <div>Data</div> <Link to="/">Home</Link> </> )} |
Steps to run the application: Use the below command in the terminal to start the application.
npm start
Output:
How is React Router is different from conventional routing ?
React Router is a library for routing in React applications. It allows you to create routes and link to them from your components. When a user clicks a link, React Router will determine which route to use and render the corresponding component.