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.

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

App.js

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 (

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

hello.jsx

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

hello2.jsx

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
8.19.2

Thanks. Bye.

--

--