ルータのルーティングエッセイを反応させます

1.基本のインストールと使用

糸addが反応し、ルータ-DOM

基本的な構造：

インポートは、「反応」からリアクト。
インポート「反応ルータ-DOM」から{ルータ、ルート、リンクとしてBrowserRouter}。
「./Pages/Index」からインポートインデックス。
「./Pages/List」からのインポートリスト。

// this.props.history.push（ "/ホーム/"）;
機能AppRouter（）{
  リターン（
    < ルータ> 
      {/ * < UL > 
        < 李> 
          < リンクへ= "/" >首页</ リンク> 
        </ 李> 
        < リチウム> 
          < リンクへ= "/リスト/ 123" >列表</ リンク> 
        </ 李> 
      </ UL > * /}
       < ルートパス= "/" 正確な成分= {索引} /> 
      <ルートパス= "/リスト/：ID"成分= {リスト} /> 
    </ ルーター>
  ）;
}

デフォルトAppRouterをエクスポートします。

インポートは、「反応」からリアクト。
インポート「反応ルータ-DOM」から{ルータ、ルート、リンクとしてBrowserRouter}。
「./Pages/Index」からインポートインデックス
インポート」./index.css'

機能AppRouter（）{
    リターン（
      < ルータ> 
          < DIV クラス名= "mainDiv" > 
            < DIV クラス名= "leftNav" > 
                < H3 >一级导航</ H3 > 
                < UL > 
                    < 李>  < リンクに= "/" >博客首页</ リンク>  < / 李> 
                    < 李> < リンクに= "" >视频教程</ リンク>  </ 李> 
                    < 李> <リンクに= "" >职场技能</ リンク>  </ 李> 
                </ UL > 
            </ DIV >

            < DIV クラス名= "rightMain" > 
                < ルートパス= "/"   正確な成分= {索引} /> 
            </ DIV > 
          </ DIV > 
      </ ルーター>
    ）;
  }

  デフォルトAppRouterをエクスポートします。

セカンダリナビゲーション

インポートは、「反応」からリアクト。
「反応ルータ-DOM」からインポート{ルート、リンク}。
「./video/ReactPage」からインポートReactpage
「./video/Vue」からインポート見ます
「./video/Flutter」からインポートフラッター


機能ビデオ（）{
    リターン（
        < DIV > 
            < DIV クラス名= "topNav" > 
                < UL > 
                    < 李> < リンクに= "/ビデオ/ reactpage" >リアクト教程</ リンク> </ 李> 
                    < 李> < リンクに= "/ビデオ/ VUE " > Vueの教程</ リンク> </ 李> 
                    < 李> < リンクに=" /ビデオ/フラッター」>フラッター教程</ リンク></ 李> 
                </ UL> 
            </ DIV > 
            < DIV クラス名= "videoContent" > 
                < DIV > < H3 >视频教程</ H3 > </ DIV > 
                < ルートパス= "/ビデオ/ reactpage /"    コンポーネント= {Reactpage} /> 
                < ルートパス= "/ビデオ/ VUE /"    コンポーネント= {ヴュー} /> 
                < ルートパス= "/ビデオ/粗動/"    コンポーネント= {フラッタ} /> 
            </ DIV > 
        </ DIV >
    ）
}
デフォルトのビデオをエクスポートします。

2ナビゲーション1つの使用を導入した後、

インポートは、「反応」からリアクト。
インポート「反応ルータ-DOM」から{ルータ、ルート、リンクとしてBrowserRouter}。
「./Pages/Index」からインポートインデックス
//  - クリティカルなコード------------開始
「./Pages/Video」からのインポートビデオ
//  - クリティカルなコード------------終了
インポート」./index.css'

機能AppRouter（）{
    リターン（
      < ルータ> 
          < DIV クラス名= "mainDiv" > 
            < DIV クラス名= "leftNav" > 
                < H3 >一级导航</ H3 > 
                < UL > 
                    < 李>  < リンクに= "/" >博客首页</ リンク>  < / 李>
                    {/ *  - キーコード------------ * /}開始
                    < 李> < リンクに= "/ビデオ/" >视频教程</ リンク>  </ 李>
                    {/ *  - キーコード------------終わり* /}
                    < 李> < リンクに= "" >职场技能</ リンク>  </ 李> 
                </ UL > 
            </ DIV >

            < DIV クラス名= "rightMain" > 
                < ルートパス= "/"   正確な成分= {索引} />
                 {/ *  - キーコード------------ * /}開始
                < ルートパス= "/ビデオ/"    コンポーネント= {ビデオ} />
                 {/ *  - キーコード------------終わり* /}
            </ DIV > 
          </ DIV > 
      </ ルーター>
    ）;
  }

  デフォルトAppRouterをエクスポートします。