How to pass data between pages in React with react-router-dom v6?

import React from "react";
import ReactDOM, { render } from "react-dom";
import Body from "../ui/Body";
import Head from "../ui/Head";
import Tail from "../ui/Tail";
import { useLocation } from "react-router-dom";
import { Component } from "react";

const AppPage = () => {
  //don't forget to use this, good luck :)
  const { state } = useLocation();
  return (
    <div>
      // and use "state", don't use static
      // what is static ?
      <p>{state.DUMMY_DATA.id}</p>
      <p>{state.DUMMY_DATA.title}</p>
    </div>
    );
};

export default AppPage;

1npx create-react-app react-router-tutorial

1yarn add [email protected] history

index.js

1import React from "react"2import ReactDOM from "react-dom"3import { BrowserRouter } from "react-router-dom"4import App from "./App"5import "./index.css"6
7ReactDOM.render(8  <React.StrictMode>9    <BrowserRouter>10      <App />11    </BrowserRouter>12  </React.StrictMode>,13  document.getElementById("root")14)

App.js

1import React from "react"2import { Routes, Route, Link } from "react-router-dom"3
4function App() {5  return (6    <div className="App">7      <nav>8        <ul>9          <li>10            <Link to="/">Home</Link>11          </li>12          <li>13            <Link to="dashboard">Dashboard</Link>14          </li>15          <li>16            <Link to="about">About</Link>17          </li>18        </ul>19      </nav>20      <div className="main">21        {/* Define all the routes */}22        <Routes>23          <Route path="/" element={<Home />}></Route>24          <Route path="about" element={<About />}></Route>25          <Route path="*" element={<NotFound />}></Route>26        </Routes>27      </div>28    </div>29  )30}31
32export const Home = () => {33  return <div>You are in Home page</div>34}35export const About = () => {36  return <div>This is the page where you put details about yourself</div>37}38export const NotFound = () => {39  return <div>This is a 404 page</div>40}41
42export default App

index.css

1body {2  margin: 0 auto;3  max-width: 900px;4}5nav ul {6  display: flex;7  list-style-type: none;8  margin: 0;9  padding: 0;10  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);11}12
13nav a {14  text-decoration: none;15  display: inline-block;16  padding: 1rem;17}18.main {19  padding: 1rem;20}

Feel free to use your bundler of choice like Create React App or Vite.

# create react app
npx create-react-app router-tutorial

# vite
npm init vite@latest router-tutorial --template react

Then install React Router dependencies:

cd router-tutorial
npm install react-router-dom@6

Then edit your App.js to be pretty boring:

export default function App() {
  return (
    <div>
      <h1>Bookkeeper!</h1>
    </div>
  );
}

Finally, go make sure index.js or main.jsx (depending on the bundler you used) is actually boring:

import { render } from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Finally, start your app:

# probably this
npm start

# or this
npm run dev

Start by creating a new React app. Use the following command from a terminal window to generate the project directory, then navigate inside the project directory and install required dependencies to add React Router v6 library:

npx create-react-app react-router-v6-example
cd react-router-v6-example
yarn add history [email protected]

Once the dependency is installed open the package.json file in your favorite code editor and you are going to see the dependency version of the react-router-dom library:

“dependencies": {
    // rest of the dependencies installed
    "react-router-dom": "6.0.0-beta.0",
  },

We made a custom demo for .No really. Click here to check it out. <img id="blog-personalized-demo-thumbnail" src=""/> Click here to see the full demo with network requests

// after other import statements
import { BrowserRouter as Router } from 'react-router-dom';

The Router part in the above snippet is the alias that makes it easier to write. It is recommended to import and use it at the top level component in a React app’s component hierarchy:

function App() {
  return <Router>{/* All routes are nested inside it */}</Router>;
}

The next component to import from react-router-dom is the new Routes:

import { BrowserRouter as Router, Routes } from 'react-router-dom';