React中路由的基本使用

               <NavLink to="/food" activeClassName="active"&gt;food</NavLink><hr/>
               <NavLink to="/wiki" activeClassName="active"&gt;wiki</NavLink><hr/>
               <NavLink to="/profile" activeClassName="active"&gt;profile</NavLink><hr/>
           </ul>@H_675_46@
<span style="color: #000000">
           {</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; 使用Switch是为了将React默认的包容性路由变为排他性路由 </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;}
           {</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; 包容性路由：/food 既能匹配到/ 又能匹配到/food   
               排他性路由：只能匹配一个 /food就只能匹配到/food </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;}

               </span><Switch><span style="color: #000000"&gt;
                  {</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;Redirect 是路由转化  即匹配到某一个路由转化到另一个路由  </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;}
                   </span><Redirect from="/" exact to="/food"/&gt;
                   <Route path="/food" component={FooD}/>
                     {<span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; 除了用Switch外也可以用exact来避免一个路由匹配多个，exact是精准匹配
                        但是使用exact时需要每个路由上都加上exact才能达到和Switch一样的效果 </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;}
                    {</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; <Route path="/wiki" exact component={Wiki}/> </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;}
                   </span><Route path="/wiki" component={Wiki}/>
                   <Route path="/profile" component={ProfilE}/>
                   <Route component={Page404}/>
               </Switch>
       </div>
    </Router>@H_675_46@
<span style="color: #000000">       )

}

}
<span style="color: #008000">//<span style="color: #008000">定义路由使用的组件
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;在Food中定义子路由</span>@H_675_46@
const Food = () =><span style="color: #000000"> (



<Link to="/food/foodlist/3">foodlist


<Link to="/food/foodmenu">foodmenu


        
    
const Wiki = () =><span style="color: #000000"> (

Wiki


<span style="color: #000000">  )

const Profile = () =><span style="color: #000000"> (

profile


<span style="color: #000000">  )

const Page404 = () =><span style="color: #000000"> (

page not found.


<span style="color: #000000">  )

<span style="color: #008000">//<span style="color: #008000">定义路由使用的组件结束
<span style="color: #008000">//<span style="color: #008000">子路由调用的组件

const Foodlist = () =><span style="color: #000000"> (

子路由的Foodlist


<span style="color: #000000">  )

const Foodmenu = () =><span style="color: #000000"> (

子路由的Foodmenu


<span style="color: #000000">  )

export <span style="color: #0000ff">default Home @H_675_46@