// version 6.4+ 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( <BrowserRouter> <App /> </BrowserRouter> ); Step 2: Make different components to render on routing : Home , Contacts,Gallery etc export function Home() { return ( <div> <h1> This is the home page </h1> </div> ); } export function Contacts() { return <h1> This is Contacts Page! </h1> } export function Gallery() { return <h1> This is Gallery Page </h1> } export function NoMatch() { return <h1> This is 404 </h1> } 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 ( <div className="App"> <nav> <Link to ="/"> Home </Link> || <Link to ="/contacts"> Contacts </Link> || <Link to ="/gallery"> Gallery </Link> </nav> <Routes> <Route path ="/" element= {<Home />}/> <Route path ="/contacts" element= {<Contacts />}/> <Route path ="/gallery/:id" element= {<Gallery />}/> // The :id part is a variable. In // http://localhost:5173/gallery/1, 1 would be the variable. // The killer feature of React Router is that it's really accessible. <Route path ="*" element= {<NoMatch />}/> </Routes> </div> ); } // that id is being passed as a prop to Gallery. import { useParams } from "react-router-dom"; export const Gallery = () => { const { id } = useParams(); return <h2>{id}</h2>; }; // The useParams hook is how you get params from React Router. // It used to be through the props but now they prefer this API.