反応ルーティング 02 - 反応ルーター V6 でのルーティング テーブルの使用 (useRoutes フック + データ ルーティング createBrowserRouter API + RouterProvider コンポーネントの使用)

モバイル 2023-09-17 07:48:06 訪問数: null

反応ルーティング 02 - 反応ルーター V6 でのルーティング テーブルの使用 (useRoutes フック + データ ルーティング createBrowserRouter API + RouterProvider コンポーネントの使用)

1. ルーティングテーブルを使用しない

1.1 React-routerV6ルーティングの簡単な使い方について

1.2 ルーティング テーブルが設定されていない

  • まず、ルーティング テーブルが構成されていないときのプロジェクト構造を次のように見てみましょう。
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します
  • 効果は次のとおりです。
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します

2. ルーティング テーブル - useRoutes フック

2.1 ルーティングテーブルの設定

  • ルーティング テーブルを次のように構成します。
    ここに画像の説明を挿入します
    import Home from "../pages/Home"
import Dog from "../pages/Dog"
import Cats from "../pages/Cat/Cats"
import CatInfo from "../pages/Cat/Info/CatInfo"

export default[
    {
      
      
        path:'/',
        element:<Home/>
    },{
      
      
        path:'/dog',
        element:<Dog/>
    },{
      
      
        path:'/cats/*',
        element:<Cats/>,
        children:[
            {
      
      
	            // path:'info',
	           // element:<CatInfo name='张三' age={18}/>
                path:'info/:catId/:catName',
                element:<CatInfo name='张三' age={
      
      18}/>
            }
        ]
    }
]

2.2 第 1 レベルのルーティング コンポーネント - useRoutes フック

  • 元のルーティング コンポーネントは次のように変更されます (元の記述方法との比較については上記を参照してください)。1.2 ルーティング テーブルが設定されていない）：
    ここに画像の説明を挿入します

    import React from "react"
import {
      
      Link,useRoutes} from 'react-router-dom'
import './index.css'

import routes from "../../routes"

function PetLef(){
      
      

    const myRoutes = useRoutes(routes);

    return(
        <div>
            <div className="myMainData left" >
                {
      
      /* 编写路由链接  靠路由链接实现切换组件 */}
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/dog">狗狗信息</Link></li>
                    <li><Link to="/cats">猫咪信息</Link></li>
                </ul>
            </div>
            <div className="myMainData right" >
                {
      
      /* 注册路由 */}
                {
      
      myRoutes}
            </div>
        </div>
    )
}
export default PetLef;
    • パラメータの取得
      ここに画像の説明を挿入します

2.3 二次ルーティングコンポーネント - アウトレットコンポーネント

  • 子ルート要素をレンダリングするには、親ルート要素で使用する必要があります<Outlet>。これにより、サブルートがレンダリングされるときにネストされた UI を表示できるようになります。親ルートが完全に一致する場合は、子のインデックス ルートがレンダリングされますが、インデックス ルートが存在しない場合は、何もレンダリングされません。
  • 元のルーティング コンポーネントは次のように変更されます (元の記述方法との比較については上記を参照してください)。1.2 ルーティング テーブルが設定されていない）：
    ここに画像の説明を挿入します
    import React,{
      
      useState} from "react";
import {
      
      Link,Outlet} from 'react-router-dom'

export default function Cats(){
      
      

    const [cats] = useState([
        {
      
      catId:'A1001',catName:'点点'},
        {
      
      catId:'A1002',catName:'阿苔'},
        {
      
      catId:'A1003',catName:'花花'}
    ]);
    return(
        <div>
            <h2>猫咪信息</h2>
            <ul>
                {
      
      
                    cats.map((cat)=>{
      
      
                        return(
                            <li key={
      
      cat.catId}>
                                {
      
      /* 编写路由链接 */}
                                {
      
      /* <Link to='info'>
                                        {cat.catId}--{cat.catName}
                                </Link> */}
                                <Link to={
      
      `/cats/info/${
        
        cat.catId}/${
        
        cat.catName}`}>
                                        {
      
      cat.catId}--{
      
      cat.catName}
                                </Link>
                            </li>
                        )
                    })
                }
            </ul>
            <br /><br />
            {
      
      /* 二级路由——展示路由组件  二级路由不用useRoutes，用Outlet */}
            <Outlet/>
        </div>
    )
}

2.4 ディレクトリ構造

  • 次のように：
    ここに画像の説明を挿入します

2.5. 発生した問題

2.5.1 问题1:useRoutes() のみ使用できます……

  • この問題は次のように説明されています。
    useRoutes() may be used only in the context of a <Router> component.
    ここに画像の説明を挿入します
  • 問題の原因:
    ルーティング テーブルを使用した後、BrowserRouter ラベルが上位に配置されませんでした。元のプロジェクトでは上位のコンポーネント ルートに配置されていましたが、実際には上位に配置されるはずです。
  • 問題を解く：
    • 1⃣️ 次のように、App.js に BrowserRouter タグを配置できます。
      ここに画像の説明を挿入します
    • 2⃣️ もちろん、index.js次のようにプロジェクトの入り口に直接配置することもできます。
      ここに画像の説明を挿入します

3. データ ルーター—V6.4 データ API:

3.1 簡単な説明

  • 次のように：
    ここに画像の説明を挿入します

3.2 createBrowserRouter API + RouterProvider コンポーネント

3.2.1 公式サイトの例

  • 次のように：
    ここに画像の説明を挿入します

3.2.2 リライトプロジェクトの例

3.2.2.1 プロジェクト設計の簡単な説明

  • 次のように：
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します

3.2.2.2 書き換えられたディレクトリ構造

  • 次のように：
    ここに画像の説明を挿入します

3.2.2.3 ルーティング設定

  • 次のように：
    ここに画像の説明を挿入します

    
import Dog from "../pages/Dog"
import Cats from "../pages/Cat/Cats"
import CatInfo from "../pages/Cat/Info/CatInfo"
import LayOut from "../pages/Layout/index.jsx"
import UserInfo from "../pages/Layout/UserInfo.jsx"
import OrganInfo from "../pages/Layout/OrganInfo.jsx"
import Login from "../pages/Login"
import About from "../pages/About"

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

const myRouter = createBrowserRouter([
    {
      
      
        path:'/',
        element:<LayOut/>,
        children:[
            {
      
      
                path:'user',
                element:<UserInfo/>,
            },{
      
      
                path:'organ',
                element:<OrganInfo/>,
            },{
      
      
                path:'/dog',
                element:<Dog/>
            },{
      
      
                path:'/cats/*',
                element:<Cats/>,
                children:[
                    {
      
      
                        path:'info/:catId/:catName',
                        element:<CatInfo name='张三' age={
      
      18}/>
                    }
                ]
            }
        ]
    },{
      
      
        path:'/login',
        element: <Login/>
    },{
      
      
        path:'/about',
        element: <About/>
    }
    
])

export default myRouter;

3.2.2.4 エフェクト表示

  • 次のように：
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します

3.2.2.5 その他のコアコード

  • App.js +index.js (エントリ)
    ここに画像の説明を挿入します
  • Layout-index.jsx +cats.jsx +organInfo.jsx
    ここに画像の説明を挿入します

    • Layout-index.jsx は次のようになります。

      import {
        
         Outlet } from "react-router-dom";
import {
        
         Link } from "react-router-dom";
import './index.css'

const LayOut = ()=>{
        
        
    return (
        <div>
            <div className="myMainData left" >
                {
        
        /* 展示一级路由 */}
                <ul>
                    <li><Link to="/user">用户信息</Link></li>
                    <li><Link to="/organ">机构信息</Link></li>

                    {
        
        /* <li><Link to="/home">Home</Link></li> */}
                    <li><Link to="/dog">狗狗信息</Link></li>
                    <li><Link to="/cats">猫咪信息</Link></li>
                </ul>
            </div>

            <div className="myMainData right" >
                {
        
        /* 展示二级路由 */}
                <Outlet/>
            </div>
        </div>
    )
}

export default LayOut;

    • cat.jsx は次のようになります。

      import React,{
        
        useState} from "react";
import {
        
        Link,Outlet} from 'react-router-dom'

export default function Cats(){
        
        

    const [cats] = useState([
        {
        
        catId:'A1001',catName:'点点'},
        {
        
        catId:'A1002',catName:'阿苔'},
        {
        
        catId:'A1003',catName:'花花'}
    ]);
    return(
        <div>
            <h2>猫咪信息</h2>
            <ul>
                {
        
        
                    cats.map((cat)=>{
        
        
                        return(
                            <li key={
        
        cat.catId}>
                                {
        
        /* 编写路由链接 */}
                                <Link to={
        
        `/cats/info/${
          
          cat.catId}/${
          
          cat.catName}`}>
                                        {
        
        cat.catId}--{
        
        cat.catName}
                                </Link>
                            </li>
                        )
                    })
                }
            </ul>
            <br /><br />
            {
        
        /* 三级路由  猫猫的详细信息 */}
            <Outlet/>
        </div>
    )
}

    • orgInfo.jsx は次のようになります。

      const OrganInfo = ()=>{
        
        
    return(
        <div>机构信息</div>
    )
}

export default OrganInfo;

3.3

4. プログラムによるナビゲーション

4.1 コンポーネント間の単純なジャンプ (パラメーターなし)

  • コードは以下のように表示されます。
    ここに画像の説明を挿入します

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

const UserInfo = ()=>{
      
      

    const navigate = useNavigate();//返回的是一个函数

    const goToOrganInfo = ()=>{
      
      
        //跳转 到机构信息
        navigate('/organ');
    } 

    const login = ()=>{
      
      
        //跳转到登录页面
        navigate('/login');
    }

    return(
        <div>
            用户信息
            <br />
            <button onClick={
      
      goToOrganInfo}>回到机构信息</button>

            <br />

            <button onClick={
      
      login}>登录/重新登录</button>
        </div>
    )
}

export default UserInfo;

  • 効果は次のとおりです。
    ここに画像の説明を挿入します

4.2 コンポーネント間の単純なジャンプ (パラメータあり)

4.2.1 paramsパラメータ

  • コードは以下のように表示されます。
    ここに画像の説明を挿入します

  • 追加されたコアコードは次のとおりです。

    import {
      
      Link,Outlet,useNavigate} from 'react-router-dom'

    const navigate = useNavigate();
    const catDetails = (cat)=>{
      
      
        navigate(`info/${
        
        cat.catId}/${
        
        cat.catName}`);
    }


<button onClick={
      
      ()=>catDetails(cat)}>详情信息</button>

  • 効果：
    ここに画像の説明を挿入します

4.2.2 状態パラメータ

  • コードは以下のように表示されます。
    ここに画像の説明を挿入します
    import {
      
      Link,Outlet,useNavigate} from 'react-router-dom'

    const navigate = useNavigate();
    const catDetails = (cat)=>{
      
      
        navigate('info',{
      
      
            replace: false,
            state:{
      
      
                catId:cat.catId,
                catName:cat.catName
            }
        });
    }
    
    <button onClick={
      
      ()=>catDetails(cat)}>详情信息</button>
  • 注意点：
    • パラメータの受け取り方法を変更する必要がある
      ここに画像の説明を挿入します
    • 席を占有する必要はありません
      ここに画像の説明を挿入します

5. 付属品

おすすめ

転載: blog.csdn.net/suixinfeixiangfei/article/details/132896551
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com