React路由

1、React路由介绍

1.1、单页面应用

单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面

优点：加载速度快，用户体验比较好

缺点：

第一次加载比传统要慢一点
不利seo
页面相对复杂
返回键

1.2、安装react-router-dom

在项目命令行中，执行

cnpm install react-router-dom -S

下载到生产环境的依赖中。

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
Link表示一个路由的链接

创建子路由文件

引入

import React from 'react'
import About from './component/About'
import News from './component/News'
import Home from './component/Home'
import {HashRouter,Route,Link} from 'react-router-dom'

代码示例

 1 class Route1 extends React.Component{
 2     constructor(){
 3         super()
 4     }
 5     render(){
 6        return(
 7         <HashRouter>
 8         <h1>这是根目录</h1>
 9         <hr />
10         <Link to='/home'>首页</Link>&nbsp;&nbsp;  
11         <Link to='/news'>新闻</Link>&nbsp;&nbsp;
12         <Link to='/about'>关于我们</Link>
13              <hr />
14         <Route path='/home' component={Home}></Route>
15         <hr />
16         <Route path='/news' component={News}></Route>
17         <hr />
18         <Route path='/about' component={About}></Route>
19     </HashRouter>
20        )
21     }
22 }

当使用HashRouter把APP根组件的元素包裹起来之后，网站就已经启用路由了，在一个HashRouter中，只能有唯一的一个根元素。在一个网站中，只需要使用唯一的一次<HashRouter></HashRouter>就行了。

Route创建的标签，就是路由规则，其中path表示要匹配的路由，component表示要展示的组件。Route具有两种身份：1.它是一个路由匹配规则；2.它是一个占位符，表示将来匹配到的组件都放到这个位置

需要注意的地方

Route 组件path地址是以/开头，配置component属性，是显示的组件，这个属性不可以大写
Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西
Link to属性的地址也是/开头，Link在页面渲染的是a标签

2.1、React-router-dom路由传值

通过配置路由的地址，在Link跳转时

Route path路径后面 /:id （key）
Link to 路径后面 /top/10 （value）

接收传值：
class类组件，this.props.match.params.属性名
函数组件：形参.match.params.属性名

代码示例：

 1 class Abc extends Component {
 2     render() {
 3         return(    
 4             <HashRouter>
 5                 <h1>这是根目录</h1>
 6                 <hr/>
 7                 <Link to='home'>主页</Link>&nbsp;&nbsp;
 8                 <Link to='news/top/12'>新闻</Link>&nbsp;&nbsp; 
 9                 <Link to='about'>关于我们</Link>
10                 <hr/>
11                 <Route path='/home'  component={Home}></Route>
12                 <Route path='/news/:type/:id'  component={News}></Route>
13                 <Route path='/about'  component={About}></Route>
14             </HashRouter>
15         )
16     }
17 }

在Route内置组件中，配置path地址：

  <Route path='/news/:type/:id'  component={News}></Route>

在Link内置组件中，配置to属性，进行跳转：

 <Link to='news/top/12'>新闻</Link>

类组件中通过生命周期进行接收，this.props携带路由传递过来的数据：

class News extends React.Component{
constructor(props){
    super()
    this.state={
        p:props.match.params
    }
}
    render(){
       return(
        <React.Fragment>
         新闻--{this.state.p.type}--{this.state.p.id}
        </React.Fragment>
       )
    }
}

2.2、嵌套路由

嵌套路由：在路由组件中，使用Link， Route，配置子路由，实现跳转，切换；

下面为一级路由，在一级路由Home为路由组件

class News extends React.Component{
    render(){
       return(
        <React.Fragment>
         <ul>
            <li><Link to='/news/deom'>社会新闻</Link></li>
             <Route path='/news/deom' component={Demo}></Route>
         </ul>
        </React.Fragment>
       )

效果展示