Basic Usage of Link Component
Using the ‘Link’ Component is easy. First make sure you have install ‘react-router-dom’ in your React Application. After installing the react-router-dom. Import the ‘Link’ Component from the ‘react-router-dom’ and use it to wrap around elements that should trigger navigation.
npm i react-router-dom
<Link to ="/home"> Home </Link>
Example: This example demonstrates the use of React Js Link component to naviagte one page to another Page and back to the first page.
Javascript
//App.js import { BrowserRouter, Routes, Route } from "react-router-dom" ; import FirstPage from "./components/FirstPage" ; import SecondPage from "./components/SecondPage" ; function App() { return ( <BrowserRouter> <Routes> <Route path= '/' element={<FirstPage />} /> <Route path= '/second' element={<SecondPage />} /> </Routes> </BrowserRouter> ); } export default App; |
Javascript
//FirstPage.js import { Link } from "react-router-dom" export default function FirstPage() { return ( <> <h2> Hey, I am first Page</h2> <Link to= "/second" >Click for Second Page</Link> </> ) } |
Javascript
//SecondPage.js import { Link } from "react-router-dom" ; export default function SecondPage() { return ( <div> <h2>Hey, I am Second Page</h2> <Link to= '/' >Click Me for Back</Link> </div> ) } |
Output:
Explain the purpose of the Link component in React Router.
React Router is a library in the React JS application. It is used to navigate the page to another page. It allows developers to create a seamless and dynamic user experience. It has many features the ‘Link’ Component stands out as a powerful tool for creating navigation links in React Applications.
Table of Content
- What is a Link Component?
- Difference between and Link?
- Basic Usage of Link Component