在React中使用react-router-dom路由

﹏ヽ暗。殇╰゛Y 2024-04-18 16:03 69阅读 0赞

# 在React中使用react-router-dom路由 #

## 前言 ##

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。

## 一、安装react-router-dom ##

首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
    
    //说明： -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
    
    //总结--save-dev和-save的区别如下:
    //devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

import React, {  Component } from 'react'
    import './index.css'
    import { 
        Route,
        Switch,
        Link,
        Redirect,
        NavLink,
        BrowserRouter as Router
    } from 'react-router-dom'
       //定义了一个Home.js组件
    class Home extends Component{ 
        render(){ 
           return (
            <Router>
               <div>
                   <ul>  
                       <NavLink to="/food" activeClassName="active">food</NavLink><hr/>
                       <NavLink to="/wiki" activeClassName="active">wiki</NavLink><hr/>
                       <NavLink to="/profile" activeClassName="active">profile</NavLink><hr/>
                   </ul>
                   /* 使用Switch是为了将React默认的包容性路由变为排他性路由 */
                   /* 包容性路由：/food 既能匹配到/ 又能匹配到/food 排他性路由：只能匹配一个 /food就只能匹配到/food */
                       <Switch>
                          /*Redirect 是路由的重定向 即匹配到某一个路由转化到另一个路由 */
                           <Redirect from="/" exact to="/food"/>
                           <Route path="/food" component={ Food}/>
                             /* 除了用Switch外也可以用exact来避免一个路由匹配多个，exact是精准匹配 但是使用exact时需要每个路由上都加上exact才能达到和Switch一样的效果 */
                            /* <Route path="/wiki" exact component={Wiki}/> */
                           <Route path="/wiki" component={ Wiki}/>
                           <Route path="/profile" component={ Profile}/>
                           <Route component={ Page404}/>  //如果前面写的Route都不匹配，那就走这个Route
                       </Switch>
               </div>
            </Router>
           )
        }
    }
    //定义路由使用的组件
    //这是定义组件的另一种写法
        //在Food中定义子路由
    const Food = () => (
        <div>
            <Link to="/food/foodlist/3">foodlist</Link><br/>
            <Link to="/food/foodmenu">foodmenu</Link>
            <Route path="/food/foodlist/:id" component = { Foodlist}></Route>
            <Route path="/food/foodmenu" component = { Foodmenu}></Route>
        </div>
      )
    
      //这是定义组件的另一种写法
     const Wiki = () => (
        <div>Wiki</div>
      )
    //这是定义组件的另一种写法
     const Profile = () => (
        <div>profile</div>
      )
    //这是定义组件的另一种写法
      const Page404 = () => (
        <div>page not found.</div>
      )
    
      //定义路由使用的组件结束
    
    
      //子路由调用的组件
      const Foodlist = () => (
        <div>子路由的Foodlist</div>
      )
      const Foodmenu = () => (
        <div>子路由的Foodmenu</div>
      )
    
    export default Home

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

![img][]

index.css里面的代码

.active { 
        font-size: 50px;
      }

运行结果如下 ：讲解：其实我们在开始的时候在浏览器地址栏里面输入的是localhost:3000,但是我们Home.js里

的代码里面有

所以直接重定向访问localhost:3000/food,执行

从而下图里面的food是高亮状态（**说明：这个高亮的样式是我们在NavLink里面写的**），最下面还显示出foodlist和foodmenu

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]

[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ1OTA1OS8yMDE4MTEvMTQ1OTA1OS0yMDE4MTExODE5MzMyOTQ0NS0xMjI1NTQyNzg2LnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/759ad2a0fa8b4222838715ee9a21866d.png