How to use React-router-dom

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.