Início / user-10712068

gokulsgr's questions

Martin Hope
gokulsgr
Asked: 2025-02-14 00:31:47 +0800 CST
  • 6

Estou tentando entender como useParams funciona no React Router. Tenho duas rotas — uma com um parâmetro dinâmico e outra com um curinga (*).

O que devo fazer para obter o

 //   {
  //     "appId": "appid",
  //     "*": "page2"
  // }

Tenho duas rotas:

/appid/página2

/appid/página3

Aqui está minha configuração: https://codesandbox.io/p/sandbox/react-router-v6-forked-sw5ndw?file=%2Fsrc%2FApp.js%3A1%2C1-69%2C1

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  Link,
  useParams,
} from "react-router-dom";

import "./styles.css";

function HomePage() {
  return <div className="page">🏠 Page</div>;
}
function Page1() {
  return <div className="page">🏠 Page1</div>;
}
function Page2() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": ""
  // }
  return <div className="page">🏠 Page2</div>;
}
function Page3() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": "page3"
  // }
  return <div className="page">🏠 Page3</div>;
}
function Application() {
  return (
    <>
      1
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/" className="link">
          Home
        </Link>
        <Link to="/appid/page2" className="link">
          APP Page 2
        </Link>
        <Link to="/appid/page3" className="link">
          APP Page 2
        </Link>
      </div>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path=":appId/*" element={<Application />} />
      </Routes>
    </BrowserRouter>
  );
}
reactjs