Reactrouter
Creating an <a href="#"> is no longer needed in react. Everything is handle as a router in react. In this docs, we will be learning how to implement links in react js. we will be using react router DOM from https://reactrouter.com/ in your terminal
npm install react-router-dom@6
in index.js insert on top
import { BrowserRouter } from "react-router-dom";
wrap your app with <BrowserRouter>
<BrowserRouter>
<App />
</BrowserRouter>
in App.js insert import statements on top
import { Routes, Route } from "react-router-dom";
import Home from './src/Pages/Home';
import About from './src/Pages/About';
add router wrapper on return
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
in Pages/Home.js inset import Link on top
import { Link } from "react-router-dom";
add Link on your return statement
<Link to="/about">About</Link>
Congratulations, this is your first react router 🎊
Last updated
Was this helpful?