React路由

React路由

      内容大纲：

                     1、什么是React路由
                     2、React路由内置组件
                     3、路由基本使用
                     4、路由传值
                     5、嵌套路由

一、什么是React路由

      1.1 React路由介绍

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。
单页面应用

• 单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面
• 优点：加载速度快，用户体验比较好
• 缺点：第一次加载比传统要慢一点
• 不利seo
• 页面相对复杂
• 返回键

      1.2 安装react-router-dom

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

npm install react-router-dom --save-dev // 这里可以使用cnpm代替npm命令

二、React路由内置组件

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

      2.1HashRouter和BrowserRouter的区别；

BrowserRouter：
　　原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client这边window.location.pathname被react router解析，example.com/react/route
　　
HashRouter：
　　原理是URL的hash，不需要由web server支持，因为它的只有‘/’path需要由web server支持，而#/react/route URL不能被web server读取，在web client这边window,location.hash被react router解析，example.com/#/react/route

三、路由基本使用

新建两个页面 分别命名为News Home 在页面编写下面代码

Home.js页面

import React,{
   Component} from 'react';
export default class Home extends Component{
   
    render(){
    
        return(
            <div>
                <h2>首页内容</h2>
            </div>
        )
    }
}

News.js页面

import React,{
   Component} from 'react';
export default class News extends Component{
   
    render(){
    
        return(
            <div>
                <h2>新闻内容</h2>
            </div>
        )
    }
}

然后再新建一个路由组件，命名为“App.js”，并编写如下代码：

App.js页面

import React from 'react';
import Home from './Home';
import News from './News';
// 引入路由 用到什么组件写进{}中
import {
   HashRouter,Route,Link} from 'react-router-dom';

class App extends React.Component{
   
    render(){
   
        return(