Routing in React js
In React.js, routing refers to the process of managing the navigation and displaying different components or views based on the URL of the application.
React doesn't come with built-in routing capabilities, so developers often use third-party libraries to implement routing functionality.
Here's a basic overview of how routing works in React with React Router:
Installation:
Here's a basic overview of how routing works in React with React Router:
Installation:
To use React Router, you need to install it as a dependency in your project:
npm install react-router-dom
Let's understand with an example of file structure for routing:
about.js
const About=()=>{
return(
<>
<h1>this is about page</h1>
</>
)
}
export default About;
Contact.js
const Contact=()=>{
return(
<>
<h1>this is contact page</h1>
</>
)
}
export default Contact;
export default Contact;
Home.js
const Home = () => {
return (
<>
<h1>This is Home page</h1>
</>
);
};
export default Home;
NavBar.js
import { Outlet,NavLink } from "react-router-dom"
const Navbar=()=>{
return (
<>
<div>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</div>
<Outlet />
</>
)
}
export default Navbar;
App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Navbar from './Navbar';
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Navbar />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default App;
0 Comments