React路由浅谈

开头

我今天又学习到新知识了，给大家分享一下吧，嘿嘿，我们共同去学习，进步。
今天学习的事关于React路由的知识，较浅的来说说吧。首先来了解下路由。

1.React路由的介绍

1.1具有单页面的特点
只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面
1.2优缺点
优点：加载速度快，用户体验比较好
缺点：

1. 第一次加载比传统要慢一点

2. 不利seo

3. 页面相对复杂

4. 返回键

2.路由的内置组件

路由的内置组件有：HashRouter、BrowserRouter、Route、Link、

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

HashRouter和BrowserRouter的区别；

BrowserRouter和HashRouter都可以实现前端路由的功能，区别是前者基于url的pathname段，后者基于hash段。

前者：http://127.0.0.1:3000/article/num1

后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）
刷新页面，BrowserRouter会将当前路由发送到服务器（因为是pathname），而HashRouter不会（因为是hash段）。

3.实现路由的传值

1.首先安装react-router-dom；
在根目录安装即可
执行命令为：

cnpm install react-router-dom -S
也可以写为：
cnpm i react-router-dom -S  

创建一个新的路由文件夹，存放路由（在生成的src中创建component文件夹）
如下：

在创建一个Apple.js,在里面引入这三个路由
代码如下

import React from "react";
import Home from "./component/Home";
import New from "./component/New";
import About from "./component/About";//引入路由文件
import { BrowserRouter, HashRouter, Route, Link} from "react-router-dom";
class App extends React.Component {
  render() {
    return (
    //根容器  HashRouter写在根容器中，只写一次就ok
      <HashRouter>
        <div>
          <h1>这是根目录</h1>
          <hr />
          <Link to="/home">邓紫棋偶像</Link>&nbsp;&nbsp;
          <Link to="/new">熊梓淇男神</Link>&nbsp;&nbsp;
          <Link to="/about">袁姗姗女神</Link>//在Link内置组件中，配置to属性，进行跳转：
        </div>
        //引入路由文件 进行跳转
        <Route path="/home" component={Home}></Route>//在Route内置组件中，配置path规则：
        <hr />
        <Route path="/new"  component={New}></Route>
        <hr />
        <Route path="/about" component={About}></Route>
      </HashRouter>
    );
  }
}
export default Apple;//向外暴露

路由一组件代码：Home.js
import React from "react";
class Home extends React.Component{
    render(){
        return(
            <div>邓紫棋.G.E.M是我偶像，很棒很棒，实力强，唱歌好听</div>
        )
    }
} 
export default Home;

路由二组件代码： New.js
import React from "react";
class New extends React.Component {
  render() {
    return <div>
        熊梓淇是我的男神，无人可比，啦啦啦
        </div>;
  }
}
export default New;

路由三组件代码：About.js
import React from "react";
class About extends React.Component{
    render(){
        return(
            <div>袁姗姗是个励志女神，马甲线好厉害</div>
        )
    }
} 
export default About;

工程中生成的index.js代码：
import React from 'react';
import ReactDOM from 'react-dom';
import Apple from './Apple';

ReactDOM.render(<Apple /> , document.getElementById('root'));

最后执行命令 ：npm start

点哪个链接，就会对应出现哪个路由下的内容
现在写另一种方法
显示出type和id

import React from "react";
import New from "./component/New";
import { BrowserRouter, HashRouter,Route,Link} from "react-router-dom";
class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <div>
          <h1>这是根目录</h1>
          <hr />
          <Link to="/new/a/12">熊梓淇男神</Link>&nbsp;&nbsp;
        </div>
        <Route path="/new/:type/:id" exact component={New}></Route>
        <hr />//exact精确显示
      </HashRouter>
    );
  }
}
export default App;

路由组件代码：

import React from "react";
class New extends React.Component {
    constructor(props){//构造方法
        super();//props接受外界的传值
        this.state = {
            p:props.match.params//获取参数
        }
    }
  render() {
    return <div>
        熊梓淇是我的男神，无人可比，啦啦啦
        --{this.state.p.type}--{this.state.p.id}//得到type值与id值
        </div>;
  }
}
export default New;

效果展示图：

注：页面上显示的和网址上显示的type与id值相对应
在上面的网址上改type与id值，
页面上的也会对应而更改。

4.嵌套路由

嵌套路由：在路由组件中，使用Link， Route，配置子路由，实现跳转，切换；
4.1下面为一级路由，在一级路由Home为路由组件

<Route path="/home" component={ Home }><Router>

4.2在Home组件中继续使用Link，Route进行路由的嵌套，需要注意的就是路由地址，前部分为一级路由地址，后面接一个二级路由相应的路径

render() {
    return (
        <div>
            <ul>
            	<li><Link to="/home/a">推荐</Link></li>
            	<li><Link to="/home/b">新时代</Link></li>
                <li><Link to="/home/c">动漫</Link></li>
            </ul>
            <Route path="/home/a" component={ A }></Route>
            <Route path="/home/b" component={ B }></Route>
            <Route path="/home/c" component={ C }></Route>
        </div>
    )
}

总结

主要说了路由之间的传值，学习了新知识，很开心呢，如果有不对的地方，大家可以指出哦，我们一起学习吧，加油！