SamwithCode

Introduction to React Router version 6.4 Installation and Setup

🚀 Introduction to React Router v6.4 – Installation and Setup

React Router v6.4 introduced powerful features like data loaders, actions, and a new file-based routing API. Let’s get started with installing and setting it up.

📦 Step 1: Installation

npm install react-router-dom@6.4

📁 Step 2: Basic Folder Structure

You can use a structure like this:

src/
├── App.js
├── main.jsx
├── pages/
│   ├── Home.jsx
│   └── About.jsx

⚙️ Step 3: Setup Browser Router in main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';
import App from './App';
import Home from './pages/Home';
import About from './pages/About';

const router = createBrowserRouter([
  {
    path: "/",
    element: ,
    children: [
      {
        path: "/",
        element: 
      },
      {
        path: "/about",
        element: 
      }
    ]
  }
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
);

🧩 Step 4: Use Outlet and Link in App.jsx

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

function App() {
  return (
    

      
      

      
    

  );
}

export default App;

✅ Now You’re Set Up!

You’ve successfully installed and configured React Router v6.4. Start creating routes with features like loaders, nested routes, and error boundaries in the next steps!