解決済み: 反応するルーターの糸

React Router ヤーンに関連する主な問題は、正しく構成するのが難しいことです。 多くのセットアップと構成が必要であり、誤って実行すると、予期しない動作やエラーが発生する可能性があります。 さらに、React Router yarn のドキュメントは常に明確または最新であるとは限らないため、開発者が問題のトラブルシューティングを行うのは困難です。

 add react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

<Router> 
    <div> 
        <ul> 
            <li><Link to="/">Home</Link></li> 
            <li><Link to="/about">About</Link></li> 
            <li><Link to="/topics">Topics</Link></li> 
        </ul>

        <hr />

        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/topics" component={Topics} />  

    </div>  
</Router>

1. この行は、react-router-dom ライブラリから BrowserRouter、Route、および Link コンポーネントをインポートします。
import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

2. この行は、アプリケーション全体を Router コンポーネントにラップして、ルーティング機能を提供します。

3. この div 要素には、異なるルート間を移動するために使用されるリンクのリストが含まれています。

Reactルーターとは

React Router は、開発者が React アプリケーション内でルートを作成および管理できるようにする React 用のルーティング ライブラリです。 コンポーネントへのルートのマッピング、URL パラメーターの処理、およびナビゲーション イベントの管理を宣言的に行う方法を提供します。 また、動的ルート マッチング、位置遷移処理、スクロール復元などの機能も提供します。

糸とは

Yarn は、開発者がより効率的かつ安全な方法で依存関係を管理するのに役立つ JavaScript のパッケージ マネージャーです。 パッケージをインストール、更新、構成するために React Router によって使用されます。 Yarn は、開発者がプロ​​ジェクトの依存関係を追跡するのにも役立ち、必要なすべてのパッケージがインストールされて最新であることを確認します。 これにより、各開発者が使用する必要があるパッケージのバージョンを簡単に確認できるため、複数の開発者とのプロジェクトでの作業が容易になります。