How to use React-router-dom

Aditya Soni
2 min readOct 14, 2022


Aight, so I just thought of writing all the things that I save on my Notion while I develop something. So, yeah. Will keep these blogs outrageously small, cause it’s not the main thing. I’m just here to document everything publicly. Aight. So, this is the first dev-related blog on this publication. Yeah. Less goo..

Yeah, so I was having trouble following a tutorial that used react-router-dom, and in hindsight, it was a problem with the version which they were using and which I currently was on.

So, this was finally the updated code that worked for me.

Have a look at this thing below.


import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
<App />


import React from "react";
import ReactDOM from "react-dom/client";
import { Routes, Route, Outlet, Link } from "react-router-dom";
import HomePage from './pages/homepage/homepage.component';
import HelloItem from "./pages/hello/hello";
import HelloItem2 from "./pages/hello/hello2";
const App = () => { return (

<Route path="/" element={<HomePage />} />
<Route path="/user1" element={<HelloItem />} />
<Route path="/user2" element={<HelloItem2 />} />
export default App;


import React from "react";const HelloItem = ()=>(
<div>Hello, this is aditya..</div>
export default HelloItem;


import React  from "react";const HelloItem2 = ()=>(
<div>Hey, this is page 2.</div>
export default HelloItem2;

And, by the way, here’s the version of react-router-dom that I’m currently on.

$ npm react-router-dom -v

Thanks. Bye.