React ルーティング リンク構成の詳細

React をインポートします。{Component} を 'react' からインポートします。
// 'react-router-dom' から {Route、BrowserRouter、Link} をインポートします
// BrowserRouter を Router に名前変更
'react-router-dom' から { BrowserRouter を Router、Link、Route としてインポートします。
'antd' から Button をインポートします。
'./App.css' をインポートします。

関数ホーム()
{
  戻る（
      <div>管理者ホームページ</div>
    ）
}

関数Me(props)
{
  console.log(プロパティ)
  戻る（
      <div>管理者マイ</div>
    ）
}

関数 Product(props)
{
  戻る（
      <div>管理者製品ページ:{props.match.params.id}</div>
    ）
}

デフォルトクラスAppをエクスポートし、Componentを拡張します。
   コンストラクタ（）
    {
      素晴らしい（）;
    }
    与える（）
    {
    パスがオブジェクト形式で記述され、以下と同じである場合、パス名、検索、ハッシュは URL パスに自動的に連結され、状態はコンポーネントに渡されるデータになります*/
      obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}とします。
      戻る（
        <div id='アプリ'>
      *複数の BrowserRouter を配置できます*/
          <ルーター>
        
        コンポーネントは HTML コンテンツも返すため、コンポーネントとして機能する関数を通じて HTML コンテンツを直接返すことはできますが、HTML コンテンツを直接記述することはできません*/
          <div>  
            <Route path="/" exact component={()=><div>ホーム</div>}></Route>
            <ルート パス="/product" コンポーネント={()=><div>製品</div>}></ルート>
            <ルート パス="/me" コンポーネント={()=><div>me</div>}></ルート>
          </div>
          {/*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/

          </ルーター>
        

          
          * * BrowserRouter 内に他のコンテンツをラップするためのルート コンテナは 1 つだけです */
        *basename='/xx' を追加した後、リンクをクリックして他のルートにジャンプすると、URL はルート名の先頭に /xx を追加するため、ルート パスと管理者が追加されたルート パスの両方がルートと一致するようになります*/
          <ルーターのベース名='/admin'>
            <div>
                <div className='nav'>
                    <Link to='/'>ホーム</Link>
                    <Link to='/product/123'>製品</Link>
                  対応するコンポーネントで props を出力して渡されたオブジェクトの情報を表示したり、replace を追加してジャンプ前のページを現在のページに置き換えたり、現在のページのみをスタックにプッシュしたりできます*/
                    <Link to={obj} replace>パーソナル センター</Link>
                </div>

                <ルート パス="/" 正確なコンポーネント = {ホーム}></ルート>
                <ルート パス="/product/:id" コンポーネント={製品}></ルート>
                <ルート パス="/me" 正確なコンポーネント = {Me}></ルート>
            </div>
          </ルーター>

        </div>
        
      ）
    }
}