React Router的简单介绍

这篇文章主要简单的介绍一下react的路由部分，我个人觉得学好一个框架，可以熟悉的掌握一个框架的router部分是非常重要的，因为路由关系到整个项目的结构，可以让我们构建复杂的应用程序。今天主要通过以下小案例讲一下react router的基本用法，以及稍微复杂点的路由嵌套。

react router的安装和环境搭建

 react router是基于react之上的一个强大的路由库，在使用它之前我们先进行简单的安装。
 ① 安装脚手架（如已安装，请忽略此步）： npm install -g create-react-app
 ② 通过脚手架创建新的项目： create-react-app react-router-demo
 ③ 使用npm安装react router： npm install --save react-router-dom
 安装完成啦~ npm start启动项目

路由跳转的Demo

场景：我们要实现从一个父组件AppRouter分别跳转到子组件Home和子组件List中

 ① 先创建子组件Home
  import React, { Component } from 'react';
  class Home extends Component {
        constructor(props) {
            super(props);
            this.state = {  }
        }
        render() { 
        return ( 
这是home组件
 );
        }
    }
  export default Home;
  
  ② 再创建子组件List
  import React, { Component } from 'react';
  class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  
这是List组件
 );
    }
  }
export default List;

③ 最后创建父组件AppRouter
import React from "react";
// 重新定义BrowserRouter为Router，  Link相当于是a标签 
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// 引入要跳转的两个组件
import Home from './Pages/Home'
import List from './Pages/List'

function AppRouter() {
  return (
    
        

         {/* 点击这两个链接，进行相应的跳转 */}
            
首页 
            
列表 
        
         {/* exact是精确匹配  component是对应的显示的视图组件 */}
         
        
    
  );
}

export default AppRouter;

reactRouter的动态传值

应用场景： 当点击任何一个链接，需要可以准确的打开详细的文章内容，这就需要靠传递文章ID来进行实现。不同的链接传递的ID都是不同的，所以就需要路由有动态传值的能力。

动态路由的步骤

1. 设置规则（eg: path="/list/:id"）
2. 传递值 (eg: to="/list/123")
3. 接收值 (eg: this.props.match 小伙伴可以自己打印一下这个值，看看它到底包含了那些信息)
4. 显示内容

// 父组件进行设置规则，并进行动态值的传递
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import List from './page/list';

function AppRouter(){
  return(
    
      

        {/*② 传值123 */}
        
列表页
        {/* ① :id是设置规则 */}
        
      
    
  )
}
export default AppRouter;

// 跳转到的详细页面，进行值的接收和展示
import React, { Component } from 'react';
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
    return (  
显示接收的路由参数->{this.state.id}
 );
    }
    componentDidMount(){
      // ③ 路由接收值 通过props来接收，传递的值在this.props.match中
      // patch: 自己定义的路由规则，可以获取id的参数。
      // url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
      // params：传递过来的参数，key和value值。
      let tempId = this.props.match.params.id; // id的是自己定义的变量名
      this.setState({id: tempId});
    }
}

export default List;

reactRouter的路由重定向

重定向和跳转的区别：
跳转是可以用浏览器的回退按钮返回上一级的，而重定向是不可以的。

重定向的两种方式：

标签式重定向: 就是利用标签来进行重定向，业务逻辑不复杂时建议使用这种。
编程式重定向: 这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功跳转到会员中心页面等等。

① 标签式重定向：
import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom"; // 引入Redirect标签
class Index extends Component {
    constructor(props) {
        super(props);
    }
    render() { 
        return (
          

            {/* 点击首页的时候会重定向到home页面 */}
            
            
标签式重定向
          
        );
    }
}

② 编程式重定向：
class Index extends Component {
    constructor(props) {
        super(props);
        //  编程时的重定向 官方文档就是这样写的 业务逻辑复杂的时候这样写
        this.props.history.push('/home/')
    }
    render() { 
        return (
          

            
编程式重定向
          
        );
    }
}

reactRouter的路由嵌套

在实际项目开发中，路由嵌套是很常用的~ 由于嵌套可能涉及到很多个组件，在写案例之前先简单的介绍一下各个组件之间的嵌套关系。

image

 ① 首先在项目的pages文件下，创建两个简单的一级路由对应的视图Home和List组件。
 // Home组件
 import React, { Component } from 'react';
 class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
    return ( 
home component 
 );
    }
 }
export default Home;

// List 组件
import React, { Component } from 'react';
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
    return ( 
List component 
 );
    }
}
export default List;

② 在根项目下创建一个总的路由管理的页面，用来进行一级路由的跳转，这里组件名为AppRouter
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import List from './page/list';
import Home from './page/home'
function AppRouter(){
  return(
    
      

        
首页
        
列表页
        
        
        
      
    
  )
}
export default AppRouter;

③ 在根目录下创建一个components文件夹，用来盛放在二级路由要显示的视图。这里仅以Home组件下的二级路由做示例。
  和一级路由类似，需要创建一个用来管理二级路由跳转的路由配置组件，比如这里叫做 Video组件
import React from 'react';
import { Route, Link } from 'react-router-dom';

// 这就是二级路由跳转下对应的视图组件
import ReactPage from './video/reactPage';
import Angular from './video/angular';
import Vue from './video/view';

function Video(){
  return (
   //二级路由 不需要用router进行包裹，这是很重要的一点
    

      

        

          
React教程
          
Angular教程
          
Vue教程
        
      
      

        
视频教程
        
        
        
      
    
  )
}
export default Video;

根据上面组件的二级跳转，我们还需要有ReactPage，Angular，Vue视图组件,
我们可以把三个组件放到一个文件夹下进行统一管理。
由于这三个组件都是无状态组件，所以我这里就给出其中一个组件的例子就可以了~ 其他两个可以按部就班哦~

eg: 给出ReactPage组件
import React from 'react';

function Reactpage() {
  return (
react page页面
)
}
export default Reactpage;

总结

今天的react router就简单的介绍到这里，路由嵌套由于涉及的组件较多，还是希望这个稍微繁琐的介绍，可以帮助大家更好的了解路由的使用~