Nothing appears after making an App using react router-CodePudding

I used one of the given examples here: https://reactrouter.com/en/v6.3.0/getting-started/overview, after testing my own code which also didn't appear.

import React from "react";
import { Routes, Route, Outlet } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}

function Invoice() {
  return <h1>Invoice </h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

export default App;

I still don't get anything showing up after running the code, just a white screen.

CodePudding user response：

You missed BrowserRouter.

Try this:

import React from "react";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="invoices" element={<Invoices />}>
          <Route path=":invoiceId" element={<Invoice />} />
          <Route path="sent" element={<SentInvoices />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}

function Invoice() {
  return <h1>Invoice </h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

export default App;

CodePudding user response：

I thought you forget "/" before route path Like this

import React from "react";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/invoices" element={<Invoices />}>
          <Route path="/:invoiceId" element={<Invoice />} />
          <Route path="/sent" element={<SentInvoices />} />
    </BrowserRouter>
  );
}

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}

function Invoice() {
  return <h1>Invoice </h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

export default App;

import React from "react";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="invoices" element={<Invoices />}>
          <Route path=":invoiceId" element={<Invoice />} />
          <Route path="sent" element={<SentInvoices />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}

function Invoice() {
  return <h1>Invoice </h1>;
}

function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

export default App;