反応自動構築ルーティングの実装

//ルーティング設定が必要です。これは配列です。import Discover from "../pages/Discover"
「../pages/Discover/Djradio」からDjradioをインポートします
「../pages/Discover/Playlist」からプレイリストをインポートします
「../pages/Discover/Toplist」からToplistをインポートします。
「../pages/Friends」からFriendsをインポートします
「../pages/Mine」からMineをインポートします
「../pages/Page404」からPage404をインポートします。
定数ルート = [
    {
        パス: "/friends",
        コンポーネント: 友達
    },
    {
        パス: "/mine",
        コンポーネント: 鉱山
    },
    
    {
        パス: "/discover",
        コンポーネント: 発見、
        子供たち： [
            {
                パス: "/discover/djradio",
                コンポーネント: Djradio
            },
            {
                パス: "/discover/playlist",
                コンポーネント: プレイリスト

            },
            {
                パス: "/discover/toplist",
                コンポーネント: トップリスト
            }
        ]
    },
    この設定はすべてのルーティング設定パスの後になければなりません: "*",
        コンポーネント: ページ404
    }
]

デフォルトルートをエクスポートする

├─発見
│ │ ABC.js
│ │ インデックス.js
│ │
│ ├─DJラジオ
│ │ │ インデックス.js
│ │ │ lf.js
│ │ │
│ │ └─gv
│ │ インデックス.js
│ │
│ ├─プレイリスト
│ │ インデックス.js
│ │
│ └─トップリスト
│ インデックス
│
├─エンターテインメント
│ インデックス
│
├─友達
│ インデックス
│ xb.js
│
├─鉱山
│ インデックス
│
└─404ページ
        インデックス

//基本的なルーティングコンポーネントを導入する（プロジェクトにnpm i react-router-domをインストールする）
「react-router-dom」から {HashRouter を Router,Route としてインポートします。
クラスDemoはReact.Componentを拡張します。
    与える（）{
        //コーナーストーンルーティング <ルーター>
            //ルーティングレシピコンポーネントはパスによってコンポーネントと一致します
            <ルート パス="/" コンポーネント={ホーム}/>
             <ルート パス="/mine" コンポーネント={Mine}/>
        </ルーター>
    }
}

//このファイルはルート設定を通じてルートをコンパイルします import React from 'react'
「react-router-dom」から Switch、Route をインポートします。
デフォルトのクラスCompileRouterをエクスポートし、React.Componentを拡張します。
    コンストラクタ() {
        素晴らしい（）
        この状態 = {
            : []
        }
    }
    レンダリングルート() {
        let {routes} = this.props; //routes ルーティング構成を取得する //1.routes を通じて Route コンポーネントを生成する //routes が配列であることを確認する // console.log(routes)
        //render は、componentDidMount と componentWillUnmount を繰り返し呼び出さない if (Array.isArray(routes) &&routes.length > 0) {
            // 受信ルートが配列であることを確認する // 受信ルートをループする
            finalRoutes = ルート.map(ルート => {
                //各ルートは次のようになります {path:"xxx",component:"xxx"}
                //ルートに子ノードがある場合 {path:"xxx",component:"xxx",children:[{path:"xxx"}]}
                戻り値 <ルートパス={route.path} キー={route.path} レンダリング={
                       // この目的は、ルートにネストされたルートがある場合、ルートの子にある構成データをこのコンポーネントに渡すことができるようにすることです。これにより、コンポーネントは CompileRouter を再度呼び出すときにネストされたルートをコンパイルできます () => <route.componentroutes={route.children} />
                } />
            })

            this.setState({
                c: 最終ルート
            })
        } それ以外 {
            throw new Error('ルートは配列で、その長さは 0 より大きい必要があります')
        }
    }
    コンポーネントマウント() {
        // Route コンポーネントを計算するために renderRoute が最初に呼び出されることを確認します this.renderRoute()
    }
    与える（） {
        { c } = this.state; とします。
        戻る （
            <スイッチ>
                {c}
            </スイッチ>
        ）
    }
}

'react' から React をインポートします
'react-router-dom' から HashRouter を Router, Link としてインポートします。
//カプセル化された CompileRouter を導入する。import CompileRouter from "./utils/compileRouter"
// 1 で定義されたルーティング構成データをインポートします。importroutes from "./router"
console.log(ルート)
クラスAppはReact.Componentを拡張します。
    与える（） {
        戻る （
            <ルーター>
                <Link to="/friends">友達</Link>
                |
                <Link to="/discover">発見</Link>
                |
                <Link to="/mine">私の</Link>
                *vue-router のビュー コンポーネントとして、ルーティング構成データを渡す必要があります*/
                <CompileRouter ルート = {ルート} />
            </ルーター>
        ）
    }
}

デフォルトアプリをエクスポート

'react' から React をインポートします
「react-router-dom」から { Link } をインポートします。

「../../utils/compileRouter」からCompileRouterをインポートします。
関数 Discover(props) {

    let {routes} = props //このデータは、ComileRouterコンポーネントがコンパイルされるときに子から渡されます
    // console.log(ルート)
    links = ルート.map(ルート => {
        戻る （
            <li キー = {ルートパス}>
                <リンク先={route.path}>{route.path}</Link>
            </li>
        ）
    })
    戻る （
        <フィールドセット>
            <legend>発見</legend>
            <h1>ただ熱いお湯を飲めばいいというわけではないことが分かりました</h1>
            <ul>
                {リンク}
            </ul>
            コアコード。ここで再度使用して、子データを通じてルートをレンダリングできます。
            <CompileRouter ルート = {ルート} />
        </フィールドセット>
    ）
}
発見.meta = {
    タイトル: 「発見」、
    アイコン: ""
}
エクスポートデフォルト発見

コンテキストが必要です(
  ディレクトリ、
  (useSubdirectories = true)、
  (正規表現 = /^\.\/.*$/)、
  (モード = '同期')
);

'./test' というコンテキストが必要です (false、/\.test\.js$/)。
//(作成) ファイルがテスト ディレクトリから取得され、リクエストが `.test.js` で終わるコンテキスト。
require.context('../', true, /\.stories\.js$/);
// (作成) すべてのファイルが親フォルダーとそのすべてのサブフォルダーから取得され、リクエストが `.stories.js` で終わるコンテキスト。

p = require.context("...",true,"xxx") とします。
p.resolve("パス")

コンポーネントを require.context('../pages', true, /\.js$/, 'sync') とします。

let paths = components.keys() //インポートされたすべてのファイルのアドレスを取得します // console.log(paths)
ルートをpaths.map(path => {
    コンポーネント = components(path).default とします。
    パス = path.substr(1).replace(/\/\w+\.js$/,"")
    戻る {
        パス、
        成分
    }
})
console.log(ルート)

context = require.context("../pages", true, /\.js$/); とします。

let paths = context.keys() //すべてのファイルのパスを取得する

context = require.context("../pages", true, /\.js$/); とします。

let paths = context.keys() //すべてのファイルのパスを取得します。letroutes = paths.map(path => {
    //インポートされたコンポーネントをバッチ取得します。let component = context(path).default;
    console.log(コンポーネント)
    })

//目的は何ですか?
//ルーティング設定を生成する constroutes = [
     {
         パス： ""、
         コンポーネント:xxx
          子供たち：[
                 {
                     パス:"xxx"
                     コンポーネント:xxx
                 }
            ]
     }
 ]

// コンテキストが必要です()

// 1. 検索するディレクトリ、
// 2. サブディレクトリも検索するかどうかを示すフラグ。 
// 3. ファイルに一致する正規表現。
context = require.context("../pages", true, /\.js$/); とします。

let paths = context.keys() //すべてのファイルのパスを取得します letroutes = paths.map(path => {
    //インポートされたコンポーネントをバッチ取得します。let component = context(path).default;
    //メニューのレンダリングを容易にするためのコンポーネント拡張属性 let meta = component['meta'] || {}
    //console.log(パス)
    // この正規表現の目的 // アドレスは ./Discover/Djradio/index.js であるため、このタイプのアドレスは直接使用できないため、処理する必要があります //1. 次に最初の "." を削除します。結果は /Discover/Djradio/index.js になります
    //2. 処理後も、/Discover/Djradio を期待しているため、直接使用することはできません。そのため、正規表現を使用して index.js を削除します。 //3. 後続のパスがフォルダーではなく、結果が /Discover/abc.js である可能性があります。ルーティング構成のパス属性ではサフィックス名を使用できないため、.js サフィックス名は正規表現 path = path.substr(1).replace(/(\/index\.js|\.js)$/, "") で置き換えられます。
    // console.log(パス)
    戻る {
        パス、
        成分、
        メタ
    }
})

関数 convertTree(ルート) {
    treeArr = [] とします。
    //1. データを処理し、各データの ID と親 (一般に「お父さんはどこへ行くのか」として知られています) を処理します。
    ルート.forEach(ルート => {
        comparePaths = route.path.substr(1).split("/") とします。
        // コンソール.log(比較パス)
        比較パスの長さが1の場合
            //ルートノードであることを示します。ルートノードにはparent_idを追加する必要はありません
            ルートID = comparePaths.join("")
        } それ以外 {
            //説明には親ノードがあります//まず自身のIDを処理します
            ルートIDを比較します。
            //最後の項目がparent_idである点を除いて、comparePaths
            比較パス.pop()
            ルート.parent_id = comparePaths.join("")
        }
    })
    //2. すべてのデータが親ノードのIDを見つけたら、次は親ノードの実際の検索です。routes.forEach(route => {
        //現在のルートにparent_idがあるかどうかを判断します
        ルートの親IDが
            //親ノード //id===parent_id を持つルートは、現在のルートの親ノードです。let target =routes.find(v => v.id === route.parent_id);
            //親ノードにchildren属性があるかどうかを判断します if (!target.children) {
                ターゲット.children = []
            }
            target.children.push(ルート)
        } それ以外 {
            treeArr.push(ルート)
        }
    })

    treeArrを返す
}

// コンテキストが必要です()

// 1. 検索するディレクトリ、
// 2. サブディレクトリも検索するかどうかを示すフラグ。 
// 3. ファイルに一致する正規表現。
context = require.context("../pages", true, /\.js$/); とします。

let paths = context.keys() //すべてのファイルのパスを取得します。letroutes = paths.map(path => {
    //インポートされたコンポーネントをバッチ取得します。let component = context(path).default;
    //メニューのレンダリングを容易にするためのコンポーネント拡張属性 let meta = component['meta'] || {}
    //console.log(パス)
    // この正規表現の目的 // アドレスは ./Discover/Djradio/index.js であるため、このタイプのアドレスは直接使用できないため、処理する必要があります //1. 次に最初の "." を削除します。結果は /Discover/Djradio/index.js になります
    //2. 処理後も、/Discover/Djradio を期待しているため、直接使用することはできません。そのため、正規表現を使用して index.js を削除します。 //3. 後続のパスがフォルダーではなく、結果が /Discover/abc.js である可能性があります。ルーティング構成のパス属性ではサフィックス名を使用できないため、.js サフィックス名は正規表現 path = path.substr(1).replace(/(\/index\.js|\.js)$/, "") で置き換えられます。
    // console.log(パス)
    戻る {
        パス、
        成分、
        メタ
    }
})
// この種類のデータはフラット データであり、ルーティング ルールに準拠していません // 時間計算量を o(n) にできるだけ減らすアルゴリズムを実行する必要があります // 時間計算量が o(n^2) の convertTree アルゴリズムをカプセル化します
// console.log(ルート)

// id
//親ID

関数 convertTree(ルート) {
    treeArr = [] とします。
    //1. データを処理し、各データの ID と親 (一般に「お父さんはどこへ行くのか」として知られています) を処理します。
    ルート.forEach(ルート => {
        comparePaths = route.path.substr(1).split("/") とします。
        // コンソール.log(比較パス)
        比較パスの長さが1の場合
            //ルートノードであることを示します。ルートノードにはparent_idを追加する必要はありません
            ルートID = comparePaths.join("")
        } それ以外 {
            //説明には親ノードがあります//まず自身のIDを処理します
            ルートIDを比較します。
            //最後の項目がparent_idであることを除いて、comparePaths
            比較パス.pop()
            ルート.parent_id = comparePaths.join("")
        }
    })
    //2. すべてのデータが親ノードのIDを見つけたら、次は親ノードの実際の検索です。routes.forEach(route => {
        //現在のルートにparent_idがあるかどうかを判断します
        ルートの親IDが
            //親ノード //id===parent_id を持つルートは、現在のルートの親ノードです。let target =routes.find(v => v.id === route.parent_id);
            //親ノードにchildren属性があるかどうかを判断します if (!target.children) {
                ターゲット.children = []
            }
            target.children.push(ルート)
        } それ以外 {
            treeArr.push(ルート)
        }
    })

    treeArrを返す
}

エクスポートデフォルト convertTree(ルート)

// モジュールを取得する // console.log(p("./Discover/index.js").default)

//目的は何ですか?
//ルーティング設定を生成する // constroutes = [
// {
// パス： ""、
// 成分、
// 子供たち：[
// {パスコンポーネント}
// ]
// }
// ]