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

Tags:

#ReactJS-Router #ReactJS #Web Technologies

Difference between <a> and Link?

Conclusion:

Basic Usage of Link Component

Javascript

Javascript

Javascript

Output:

Explain the purpose of the Link component in React Router.

Similar Reads

Contact Us