Router in React
Router
React router concept is used to make multi-page route.
How to install: npm install react-router-dom
BrowserRouter: Wrapping up the routes with BrowserRouter
Routes: Individual routes will be created with in the Routes
Route: Declaring the path and component
Link: Link is used to navigate to component
Link: Link is used to navigate to component
Example:
App.js
import React from "react";
import { BrowserRouter,Route,Routes } from "react-router-dom";
import Navbar from "./navbar";
import Home from "./home";
import Dashboard from "./dashboard";
import About from "./about";
const App = () => {
return (
<div>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" exact Component={Home} />
<Route path="/dashboard" exact Component={Dashboard} />
<Route path="/about" exact Component={About} />
</Routes>
</BrowserRouter>
</div>
);
};
export default App;
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () =>{
return(
<div>
<uL>
<Link to="/"><li>Home</li></Link>
<Link to="/dashboard"><li>dashboard</li></Link>
<Link to="/about"><li>about</li></Link>
</uL>
</div>
);
}
export default Navbar;
Home.js
import React from "react";
const Home = () =>{
return(
<div>
<center>
<p>Welcome to Home Page!</p>
</center>
</div>
)
}
export default Home;
Dashboard.js
import React from "react";
const Dashboard = () =>{
return(
<div>
<center>
<p>Welcome to Dashboard Page!</p>
</center>
</div>
)
}
export default Dashboard;
About.js
import React from "react";
const About = () =>{
return(
<div>
<center>
<p>Welcome to About Page!</p>
</center>
</div>
)
}
export default About;
