DEV Community

Michał Górnicki
Michał Górnicki

Posted on

Most simplistic tutorial to React Router - create routing in 2 minutes

Hi!
I wanted to create very fast guide to React Router because first time I routing it was big struggle.

So, let's begin.

  1. After creating app by command npx create-react-app "your-app-name" install React Router with command npm install react-router-dom@6.
  2. 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";
  3. 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>
Enter fullscreen mode Exit fullscreen mode
  1. 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.
  2. 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>
Enter fullscreen mode Exit fullscreen mode

And that's everything. Your React Router is done and fully working!

Top comments (0)