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?