Hi!
I wanted to create very fast guide to React Router because first time I routing it was big struggle.
So, let's begin.
- After creating app by command npx create-react-app "your-app-name" install React Router with command
npm install react-router-dom@6
. - In main file mostly called App.jsx import React Router components by adding in the beginning
import { Route, HashRouter as Router, Routes } from "react-router-dom";
- Again in App.jsx create structure like this:
<Router>
<div>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/SubPageOne" element={<SubPageOne/>} />
<Route path="/SubPageTwo" element={<SubPageTwo/>} />
</Routes>
</div>
</Router>
- As you can see there are few react components (Navbar, Home, SubPageOne, SubPageTwo). I've created Navbar component outside of Routes container so it can be available on every subpage.
- In Navbar component where we want to have navigation to every subpage create links to them:
<Link to="/">strona główna</Link>
<Link to="/Database">baza danych</Link>
<Link to="/Create">stwórz nowe ogłoszenie</Link>
And that's everything. Your React Router is done and fully working!
Top comments (0)