React中路由的基本使用

发布时间：2020-12-15 05:30:17 所属栏目：百科来源：网络整理

导读：现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。注意下面我们使用的是React-Router-DOM React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该

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

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

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

：

import React,{ Component } from 'react'import './index.css'
import {
Route,Switch,Link,Redirect,NavLink,BrowserRouter as Router
} from 'react-router-dom'

class Home extends Component{
render(){
return (

               <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><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: #008000"&gt;//</span><span style="color: #008000"&gt;在Food中定义子路由</span>

const Food = () => (

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

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

const Wiki

Wiki

const Profile = () => (

profile

const Page404 = () => (

page not found.

//定义路由使用的组件结束

//子路由调用的组件
const Foodlist = () => (

子路由的Foodlist

子路由的Foodmenu

export default Home

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

index.css里面的代码

{:; }

运行结果：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!