Step 1: Activate BrowserRouter in index.js file

import ReactDOM from "react-router-dom"

import App from "./App"

import {BrowserRouter} from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

);

Step 2: Make different components to render on routing : Home ,

Contacts,Gallery etc

export function Home() {

return (

);

}

export function Contacts() {

return

}

export function Gallery() {

return

}

export function NoMatch() {

return

}

Step 3: Route them in app.js file accordingly

import {Routes , Route, Link } from "react-router-dom";

import {Home} from "./pages/Home";

import {Contacts} from "./pages/Contacts";

import {Gallery} from "./pages/Gallery";

import {NoMatch} from "./pages/NoMatch";

export function App() {

return (

);

}

// that id is being passed as a prop to Gallery.

import { useParams } from "react-router-dom";

export const Gallery = () => {

const { id } = useParams();

return

};

// The useParams hook is how you get params from React Router.

// It used to be through the props but now they prefer this API.