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

在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>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数,比如本例中当我们点击下面这个“food”时，这个“food”字符串就会变成高亮的样式突出显示-->
                   <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是我引入的一个高亮的样式

index.css里面的代码

.active {
    font-size: 50px;
  }

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

的代码里面有

<Redirect from="/" exact to="/food"/>

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

 <NavLink to="/food" activeClassName="active">food</NavLink><hr/>

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