【React备忘录】React Router v6的路由

2 年 ago

清, 扬

6 minutes

◆ 使用场景

使用在线代码编辑器「code sandbox」。

每个版本的内容如下所示。

◆ 基本路由配置

① 路由器的设置

在index.js中，导入react-router-dom的BrowserRouter组件，
将其包围在App.js之外。（必要设置）

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

② 路由设置

• 配置组件

来源

// Home.jsx
export default function Home() {
  return (
    <div>
      <h1>HOME</h1>
    </div>
  );
}

// Page1.jsx
export default function Page1() {
  return (
    <div>
      <h1>PAGE1</h1>
    </div>
  );
}

// Page2.jsx
export default function Page2() {
  return (
    <div>
      <h1>PAGE2</h1>
    </div>
  );
}

在App.js中进行路由设置

来源

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";

export default function App() {
  return (
    <div className="App">
      <Link to="/">HOME</Link>
      <br />
      <Link to="page1">PAGE1</Link>
      <br />
      <Link to="page2">PAGE2</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
      </Routes>
    </div>
  );
}

【功能说明】

【链接】

HTML的a标签。通过to=””属性来设置链接路径的组件。

【路径】

用于根据通过Link设置的路径显示不同的路由分配的组件。

【路径】

路由组件是用于设置要显示的组件和其路径的组件。

从逻辑角度来看，

用标签跳转路径

②Routes被筛选出来

在Route设置的路径中显示相应的组件。

这个趋势。 .)

◆ 路由的嵌套化

创建以Page1为父页面的子页面Page1DetailsA和Page1DetailsB。

这个组件内部还有其他组件的情况被称为嵌套。
要显示这个嵌套的页面，需要以下设置。

设置用于跳过子组件页面路径的链接。

第一页.jsx

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

export default function Page1() {
  return (
    <div>
      <h1>PAGE1</h1>
      <Link to="/page1/detailsA">Page1DetailsA</Link>
      <br />
      <Link to="/page1/detailsB">Page1DetailsB</Link>
    </div>
  );
}

只需要一個選項：路由設定

App.jsx是一个React组件的文件。

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";
import Page1DetailsA from "./components/Page1DetailsA";
import Page1DetailsB from "./components/Page1DetailsB";

export default function App() {
  return (
    <div className="App">
      <Link to="/">HOME</Link>
      <br />
      <Link to="page1">PAGE1</Link>
      <br />
      <Link to="page2">PAGE2</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1">
          <Route index={true} element={<Page1 />} />
          <Route path="/page1/detailsA" element={<Page1DetailsA />} />
          <Route path="/page1/detailsB" element={<Page1DetailsB />} />
        </Route>
        <Route path="/page2" element={<Page2 />} />
      </Routes>
    </div>
  );
}

・点数

用Route组件包围已嵌套的组件。

<Route path="/page1">
...
</Route>

将显示Page1组件的Route组件的index属性设为true。

<Route path="/page1">
    <Route index={true} element={<Page1 />} />
</Route>

设置子页面的组件

<Route path="/page1">
    <Route index={true} element={<Page1 />} />
    <Route path="/page1/detailsA" element={<Page1DetailsA />} />
    <Route path="/page1/detailsB" element={<Page1DetailsB />} />
</Route>

获取URL参数

获取通过URL设置的参数的方法如下。

1) 组件创建

UrlParameter.jsx 的本地化中文翻譯：Url參數.jsx。

import { useParams } from "react-router-dom";

export default function UrlParameter() {
  const { id } = useParams();

  return (
    <div>
      <h1>PAGE2</h1>
      <p>URL PARAMETER is {id}</p>
    </div>
  );
}

积分

通过使用useParams函数，可以获取参数。

在父组件中进行链接设置

第2页.jsx

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

export default function Page2() {
  return (
    <div>
      <h1>PAGE2</h1>
       // パラメータで100を渡す
      <Link to="/page2/100">URL Parameter</Link>
    </div>
  );
}

在App.js中进行路由配置。

App.jsx 的中文释义是：App.jsx

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";
import Page1DetailsA from "./components/Page1DetailsA";
import Page1DetailsB from "./components/Page1DetailsB";
import UrlParameter from "./components/UrlParameter";

export default function App() {
  return (
    <div className="App">
      <Link to="/">HOME</Link>
      <br />
      <Link to="page1">PAGE1</Link>
      <br />
      <Link to="page2">PAGE2</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1">
          <Route index={true} element={<Page1 />} />
          <Route path="/page1/detailsA" element={<Page1DetailsA />} />
          <Route path="/page1/detailsB" element={<Page1DetailsB />} />
        </Route>
        <Route path="/page2">
          <Route index={true} element={<Page2 />} />
          <Route path=":id" element={<UrlParameter />} />
        </Route>
      </Routes>
    </div>
  );
}

要点

通过将值和路径设置为参数，可以将值作为参数设置。
由于这次设置为id，因此在UrlParameter组件中获取的值也是id。

const { id } = useParams();

◆ 获取查询参数

创建用于获取查询参数的组件。

・查询参数组件.jsx

import { useSearchParams } from "react-router-dom";

export const QueryParameter = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const name = searchParams.get("name");
  return (
    <div>
      <h1>QueryParameter</h1>
      <p>Query parameter is {name}</p>
    </div>
  );
};

点数

使用useSearchParams函数。
通过使用searchParams的get方法，可以获取设置在查询参数中的值。

从父组件调用

这次是从Page2组件调用并获取查询参数。

・第二页.jsx

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

export const Page2 = () => {
  return (
    <div>
      <h1>Page2のページ</h1>
      <Link to="/page2/100">UrlParameter</Link>
      <br />
      <Link to="/page2/query?name=hello">QueryParameter</Link>
    </div>
  );
};

?name=hello 设置 name 的值。

在App.js中进行路由设置

・应用程序.jsx

<Route path="/page2">
    <Route index={true} element={<Page2 />} />
    <Route path=":id" element={<UrlParameter />} />
    <Route path="/page2/query" element={<QueryParameter />} />
</Route>

◆ 获取state

向子组件传递变量值的方法。

设置接收state的组件

・第一页详情A组件

import { useLocation } from "react-router-dom";

export const Page1DetailA = () => {
  const { state } = useLocation();
  return (
    <div>
      <h1>Page1DetailAのページ</h1>
      {state != null ? (
        <ul>
          {state.map((arr) => {
            return <li key="arr">{arr}</li>;
          })}
        </ul>
      ) : (
        ""
      )}
    </div>
  );
};

积分

使用 useLocation 函数来获取 state。

本次输入代码的目的是将数组传递给状态并显示列表。

从父组件接收状态传递给子组件。

第一页.jsx

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

export const Page1 = () => {
  const arr = [...Array(10).keys()];
  return (
    <div>
      <h1>Page1のページ</h1>
      <Link to="/page1/detailA" state={arr}>
        DetalilA
      </Link>
      <br />
      <Link to="/page1/detailB">DetalilB</Link>
    </div>
  );
};

积分 (jī

在Link组件上设置state={}，以传递变量。

结果如下。

◆ 不使用Link组件进行页面跳转

若要不使用Link组件进行转换，请按以下步骤进行设置。

在这个例子里，假设按下按钮后会发生页面转换。

使用导航函数

使用 useNavigate 函数来设定要跳转的页面。

import { useNavigate } from "react-router-dom";

export const Page1 = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Page1のページ</h1>
      <button onClick={() => navigate("/page1/detailA")}>DetailA</button>
      <br />
      <Link to="/page1/detailB">DetalilB</Link>
    </div>
  );
};

使用这个设置，可以像Link组件一样进行页面跳转。

◆ 创建404页面

如果访问到不存在的链接时会自动生成（404页面），具体制作方法如下。

① 创建组件

未找到.jsx

export const NotFound = () => {
  return <p>存在しないページです</p>;
};

设置路由

请将以下内容用中文进行释义：App.jsx

import { NotFound } from "../NotFound";

export const Router = () => {
  return (
    <Routes>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

积分

用*（星号）设置Route组件的path。

◆ 使用场景

◆ 基本路由配置

① 路由器的设置

② 路由设置

• 配置组件

在App.js中进行路由设置

【功能说明】

【链接】

【路径】

【路径】

◆ 路由的嵌套化

设置用于跳过子组件页面路径的链接。

只需要一個選項：路由設定

・ 点数

获取URL参数

1) 组件创建

在父组件中进行链接设置

在App.js中进行路由配置。

◆ 获取查询参数

创建用于获取查询参数的组件。

从父组件调用

在App.js中进行路由设置

◆ 获取state

设置接收state的组件

从父组件接收状态传递给子组件。

◆ 不使用Link组件进行页面跳转

使用导航函数

◆ 创建404页面

① 创建组件

设置路由

・点数