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.