React ルーティングの使用法 - 詳しい紹介

ルーティングの最初の使用

抽象ルーティングモジュール

src\page\Article\index.js

const Article = () => {
    
    
  return (
    <div>
      <p>文章页</p>
    </div>
  );
};

export default Article;

src\ルーター\index.js

// 导入页面
import Article from "../page/Article";
import Login from "../page/LogIn";

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

// 创建 router 实例对象并配置路由对应关系
const router = createBrowserRouter([
  {
    
     path: "/login", element: <Login /> },
  {
    
     path: "/article", element: <Article /> },
]);

export default router;

src\index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

/*
前端路由
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染
*/
import {
    
     RouterProvider } from "react-router-dom";
// 导入路由
import router from "./router";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={
    
    router}></RouterProvider>
  </React.StrictMode>
);

reportWebVitals();

ジャンプパラメータ

2つのジャンプ方法

方法 1 : 宣言型ナビゲーション ジャンプ、原理はタグに変換することです

      <Link to="/login">跳转到登录</Link>

方法 2 : 命令型ナビゲーション、プログラムによるナビゲーションは、useNavigate" フックを通じてナビゲーション メソッドを取得し、そのメソッドを呼び出してコマンド形式でルーティング ジャンプを実行することを指します。たとえば、ログイン リクエストの完了後にジャンプする場合は、次のようにします。この方法を選択できます。

文法の説明: navigate メソッドを呼び出してアドレス パスに渡すことでジャンプします。

      <button onClick={
    
    () => navigate("/login")}>跳转登录</button>

パラメータを渡す 2 つの方法

方法 1

パラメータを渡す

引き継ぐ

方法2

構成

パラメータを渡す

引き継ぐ

ネストされたルートを構成する

子はルートのネストを構成するために使用され、アウトレットはネストされたルートの出口です。

ルーティングを使用する