VuerによるReactのルーティングフックの最初の紹介

ほぼ4年間のVuerとして、私は最近、実行に対する反応を学び始めました。最初は、現代のフロントエンドフレームワークはほとんど同じだと思っていましたが、それが私を陥落させるとは思いませんでした。

ご存知のとおり、vue-routerはさまざまなフック関数を提供し、この関数はコールバックを介したページレンダリングの制御もサポートしています。反応と同じくらい大きなフレームワークも同じようなものだと思いましたが、現実は大きな打撃を受けました。（中国語を母国語とする人が書いた文書は、英語の翻訳よりも確かに優れています（๑•̀ㅂ•́）و✧）

ドキュメンテーション

私の英語が下手なのか、何が悪いのかわかりません。まず、このドキュメントは初歩的すぎます。あなたが何かをしたいのなら、あなたは何も見つけることができません。

react-router

隣のvue-routerを見てください

vue-router

サンプルコードの量を見ると、私のようなCVプレーヤーにはあまりにもフレンドリーです。

発展させる

現在、reactの推奨書き込み方法はフックなので、今回もフック書き込み方法を選びました。

最初のピット：公式文書に見られない要素

react-routerのドキュメントでは、ほとんどの記述方法は、Route要素を通るルートを直接決定することです。これを見たとき、頭が大きくなり始めました。

これは誰かが書いたものですか？？？より多くのコンポーネントがあり、ルーティング構造はより複雑ですが、これはまだ必要ですか？？？誰も母親を乗っ取って非難することはできません。

しかし、方法はありません。人々の文書はこのように書かれています。私たちに何ができるか、それをコピーします。それで私は書き始めました。

ルーティングでは、どのようにしてグローバルフックを取得しますか？このコンポーネントが表示される前にユーザー認証があります。

ここで言わなければならない問題があり、後で反応する際に遭遇する問題を解決することも考えられます。Vueはフロントエンドの開発フレームワークであり、Reactはそれを開発ライブラリと呼ぶことを好みます。フレームワークでは、すべてが作成者によって提供された方法で決定され、対応する時間に対応する操作を実行するだけで済みますが、ライブラリは完全に異なります。ライブラリは補助的な方法を提供し、ライブラリの介入は必要な場合にのみ必要です。したがって、ライブラリを使用して開発することの前提は、JS + CSS + HTMLを使用して開発していることを認識することです。そのため、多くの場合、方法を検討する必要があります。対応するAPIを盲目的に探すのではなく、JSを使用していくつかの問題を解決します。

もちろん、リアクション初心者として、それが見つからない場合は、もちろん、利用できないWebサイトにアクセスして、前任者の計画を確認してください。しかし、前任者の方法で目に見えない何かが発見されました。

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}></Route>
    </Routes>
  </BrowserRouter>
复制代码

这是官网的示例，我们可以看到外层使用BrowserRouter和Routes进行包裹，里面用Route定义单个路由。

但是我找到的大部分示例却是这样的：

  <BrowserRouter>
    <Switch>
      <Route path="/" element={<App />}></Route>
    </Switch>
  </BrowserRouter>
复制代码

Switch是个啥玩意？？为啥文档里找不到？我瞎了嘛？

在我仔仔细细的翻了两天文档后，还是在一个前辈的文章里了解到，这玩意是Routes的前身。

成吧，我忍了..

第二个坑：就是想用hooks

在不断寻找全局前置钩子的解决方案时，看到了useRoutes，仔细看看对应的写法，这不就跟vue一样吗，可算是找到了个我会的东西。

在仔细阅读过文档后，将代码改为了如下的形式：

const router = [
    {
        path: '/',
        element: <App />,
    }
]

const App = () => {
    const myRoute = useRoutes(couter)
    return (
        <BrowserRouter>
            {myRoute}
        </BrowserRouter>
     )
}
复制代码

看起来没啥大问题是吧？文档里说返回的是个router列表，且最外层使用的是Routes包裹，而且编译器还没报错。

然而当我决定启动项目看一下的时候，问题来了：

ルーターのバグ

眼熟嘛？翻译一下就是useRouters只能在Router组件上下文内使用。

前辈的代码看多了，好歹我知道这个Router指的是HashRouter和BrowserRouter，但你告我，我那没有在他的上下文中用了！子组件不算上下文嘛？？

当我直接把{myRoute}改为<MyRoute />时，又提示我<MyRoute />元素不具有任何构造签名或调用签名。

Emm...意思就是啥啥都不好使呗！亏得你是个代码，你敢来线下看我削不削你就完了！！！

没办法，为了run，为了多挣钱，还得学啊

又在大量调研了前辈的代码后，我发现了：

const MyRoute = () => {
    const myRoute = useRoutes(couter)
    return myRoute
}

const App = () => {
    return (
        <BrowserRouter>
            <MyRoute />
        </BrowserRouter>
     )
}
复制代码

我**这有啥区别？？？（希望大佬能在评论区指点我一下，谢谢，给大佬提前拜年了）

第三个坑：网上的示例不能直接照抄啊

经过大量的研究和调研，大致思路如下：

router对象的Element的值需要为一个组件，可以选择在这里下手；
在自定义组件内部增加一些判断逻辑，根据结果渲染不同内容；

この考えを持った後、私はコードを書く（コピーする）準備を始めました。

包裹组件 {
    如果有处理函数：调用处理函数
    返回Element元素
}
复制代码

ここでは問題はありませんが、問題はハンドラー関数にあります。

誰もが知っているように、ゴーストはあなたが書いたコードで将来の世代が何をするかを知っているので、あなたのコードがほとんどのシナリオを処理できることが最善です。しかし、私が見つけることができるソリューションでは、デフォルトのハンドラー関数は同期関数であり、非同期操作があると、これはうまく機能しないという事実につながります！

このとき、賢く、useStateコンポーネント内に変数を設定し、ハンドラー関数のコールバック関数を設定することを考えました。コールバックで変数が変更され、コンポーネントは変数の値に応じてサブコンポーネントまたはnullを返します。

実を言うと、Vueはたくさん書いているので、最初は本当にこれを予期していませんでした。処理関数が実行されるのを待つ方法があるかどうか、あるいはそれを書く方法があるかどうかを常に考えていましたyield。これが先ほど申し上げたように、vueからreactに切り替えるとき、考え方の変化は非常に重要です。

まとめ

メソッドの使い方を変えるのは簡単ですが、考え方を変えるのはもっと面倒です。これはほんの始まりに過ぎず、他に何がうまくいかないか誰が知っていますか。