Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnARouters in react
Routers in react are used to navigate between pages. If you use "a" tag, request is sent to the server to download the page and when new page loads, the state of react application gets destroyed unless you store the state in persistent location. When you create links using routers, user lands on new page (also url change is reflected in address bar) but all this is happening at client side. No request is sent to server. To use routers, you will need to install below package.npm i react-router-dom
import React from "react";
//You might import switch(to map links with components), NavLink(for styling links)
import {
BrowserRouter,
Route,
Link
} from "react-router-dom";
export default function RouterDemo() {
return (
<BrowserRouter>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/contact">Contact Me</Link>
</li>
</ul>
<Route exact path="/contact" component={ContactPage}/>
<Route exact path="/" component={HomePage}/>
</div>
</BrowserRouter>
);
}
function HomePage() {
return (
<div>
<h1>This is the home page</h1>
</div>
);
}
function ContactPage() {
return (
<div>
<h1>Contact me on www.softpost.org</h1>
</div>
);
}
Web development and Automation testing
solutions delivered!!