React中路由的基本使用

现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。

注意下面我们使用的是React-Router-DOM

React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的

：

import React,{ Component } from 'react'import './index.css'<span style="color: #000000">
import {
Route,Switch,Link,Redirect,NavLink,BrowserRouter as Router
} from 'react-router-dom'<span style="color: #000000">

class Home extends Component{
render(){
<span style="color: #0000ff">return<span style="color: #000000"> (

               <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>

<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>

<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>

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

<div class="cnblogs_code">

 

特别注意：/index.css是我引入的一个高亮的样式

　　

index.css里面的代码

{:; }

运行结果：

这个运行结果丑是丑了点，但是功能没瑕疵，和我一样，不靠颜值吃饭