技术干货

React Router的简单介绍

2020-03-19  本文已影响0人  mm_tang

这篇文章主要简单的介绍一下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 ( <h2>这是home组件</h2> );
        }
    }
  export default Home;
  
  ② 再创建子组件List
  import React, { Component } from 'react';
  class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>这是List组件</h2> );
    }
  }
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 (
    <Router>
        <ul>
         {/* 点击这两个链接，进行相应的跳转 */}
            <li><Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
         {/* exact是精确匹配  component是对应的显示的视图组件 */}
        <Route path="/" exact component={Home} /> 
        <Route path="/list/" component={List} />
    </Router>
  );
}

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(
    <Router>
      <ul>
        {/*② 传值123 */}
        <li><Link to="/list/123">列表页</Link></li>
        {/* ① :id是设置规则 */}
        <Route path="/list/:id" component={List}/>
      </ul>
    </Router>
  )
}
export default AppRouter;

// 跳转到的详细页面，进行值的接收和展示
import React, { Component } from 'react';
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
    return (  <h2>显示接收的路由参数->{this.state.id}</h2> );
    }
    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的路由重定向

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

重定向的两种方式：

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

① 标签式重定向：
import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom"; // 引入Redirect标签
class Index extends Component {
    constructor(props) {
        super(props);
    }
    render() { 
        return (
          <div>
            {/* 点击首页的时候会重定向到home页面 */}
           <Redirect to='/home/'/> 
            <h2>标签式重定向</h2>
          </div>
        );
    }
}

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

reactRouter的路由嵌套

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

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

// List 组件
import React, { Component } from 'react';
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
    return ( <h2>List component </h2> );
    }
}
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(
    <Router>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/list/123">列表页</Link></li>
        
        <Route path="/" exact component={Home}/>
        <Route path="/list/:id" component={List}/>
      </ul>
    </Router>
  )
}
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进行包裹，这是很重要的一点
    <div>
      <div className="videoTitle">
        <ul>
          <li><Link to="/video/reactpage">React教程</Link></li>
          <li><Link to="/video/angularpage">Angular教程</Link></li>
          <li><Link to="/video/vuepage">Vue教程</Link></li>
        </ul>
      </div>
      <div className="videoContent">
        <div>视频教程</div>
        <Route path="/video/reactpage" component={ReactPage}/>
        <Route path="/video/flutterpage" component={Angular}/>
        <Route path="/video/vuepage" component={Vue}/>
      </div>
    </div>
  )
}
export default Video;

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

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

function Reactpage() {
  return (<h2>react page页面</h2>)
}
export default Reactpage;

总结

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

上一篇 下一篇

猜你喜欢

热点阅读