問題タブ [reach-router]

私は現在、大きなプロジェクトを TypeScript に切り替えている最中です。私はとても新しく、それに慣れていません。

したがって、を使用する@reach/routerと、次のルーティングがあります。

Signは次のように定義されます。

次のエラーが表示されます。

問題は何ですか？

を使用<Link to="/projects/some-project-slug" />するとブラウザの URL が変更されますが、アプリの表示は変更されません。

アプリは次のとおりです。

<Link/>そして、 ( でインスタンス化された<ProjectsIndexView/>)を含むコンポーネントは次のとおりです。

の URLprops.hrefは正しいです。リダイレクト先の URL でブラウザを更新すると、ビューのみが機能します。ページの更新が必要ないようにしています。

両方が必要で、同じコンポーネント/を使用します。訪問者が直接アクセスした場合に、訪問者が にスローされないようにするためです。/projects<NotFound/>/projects

この問題は似ているように見えましたが、コードでリダイレクトを引き起こしていますが、<Link/>.

ガイダンスと丁寧な回答をいただければ幸いです。

アップデート

<ProjectTeaser/>コンポーネントは外部ライブラリで定義されています。このコンポーネントを使用するプロジェクトは 3 ～ 4 件あります。楽しみのために、それを使用する同じプロジェクトでコンポーネント定義をコピーしようとしました。これは、外部ライブラリからインポートされなくなったことを意味します。

これでルーティングが機能します。

これがどのように起こるか誰かが私に説明できますか? 同じコードです！異なるプロジェクトにあるだけです。私が見る唯一の違いは、ライブラリのバージョンがプリコンパイルされていることです。

<ProjectTeaser/>ただし、これが @reach/router ライブラリの期待どおりに機能している場合は、それを必要とするすべてのプロジェクトで定義をコピーする必要がないようにしようとしているため、非常に不便です。

常に存在するヘッダー コンポーネントを持つReact Staticで構築されたサイトがあります。現在のページにヒーロー コンポーネントがあるかどうかに応じて、ヘッダーは明るい色または暗い色のいずれかになります。

ヘッダーはルートの外側でレンダリングされuseEffect、子がレンダリングされる前にトリガーされます。これはおそらくルーティングのせいです。

これは現在のコードです:

レンダリングされるの<Routes default />は、React Static で構成された静的ページstatic.config.jsです。

以下は Hero コンポーネントの例です。

アプリケーションを実行してログを見ると、次のようになります。

ヒーローはルーターにあり、ヘッダーはそうではありませんが、どうすればヘッダーからヒーローの存在を検出できますか? これは非常に一般的な使用例のように感じますが、インターウェブに関する情報は見つかりませんでした。

前もって感謝します！