试着用React写项目-利用react-router解决跳转路由等问题（一）-白红宇

试着用React写项目-利用react-router解决跳转路由等问题（一）

阅读量：4085 次

发布时间：2019-05-25

本文共 3180 字，大约阅读时间需要 10 分钟。

继续本周的大方向，继续学习，昨天把简单的hi all内容呈现出来后，今天研究如何多页面或者实现页面嵌套，
开始今天的内容前老规矩，先安利：

在传统的静态网页里，我们页面跳转通过超级链，页面重定向，转发等等姿势来解决多页面展示和逻辑跳转，而React对这部分做了很好的封装，也做成了主件。

要是用也是国际惯例，npm下！！

npm install -S react-router 
 
  1 
  
 
  1

下完后直接import就可以使用，像这样

import { Router, Route, hashHistory } from 'react-router'; 
 
  1 
  
 
  1

Router是大壳子，类似于路由容器的东西

Route是具体实施路由的对象

hashHistory表示路由切换的hash值，决定最终结果

因为直接的项目结构比较建的随意，所以把目录进行了重新整理，把main.js变成一个大容器，不做任何业务主件使用，像这样。

这里写图片描述

这一部分 react官方的例子写的很详细很棒，大家也可以看，或者把他的demo跑一跑豁然开朗。

上面提到了router其实和使用常规主件一样倒入，使用即可最基本的也就是以下这种形式

我们先来写一个简单的页面

首先是昨天的ui搬家到了新的first.js

import React from 'react';import styled from 'styled-components';import { Router, Route, hashHistory } from 'react-router';const Input = styled.input`  font-size: 1.25em;  padding: 0.5em;  margin: 0.5em;  color: palevioletred;  background: papayawhip;  border: none;  border-radius: 3px;  &:hover {    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);  }`;const H1 = styled.h1`  background-color: #a1a`;export default React.createClass({  render() {    return (      
             
              
    i am first h1
      
   
    );  }}) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32

然后在我们的main.js调用他

import React from 'react';import { render } from 'react-dom';import { Router , Route , hashHistory } from 'react-router';import first from './first';render((  
       
      
    
   ), document.getElementById('app')) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12

我们倒入了 first和react-router所用到的相关对象
Router容器下有一个Route节点会让我们的页面中多出first部分的内容

长这样

这里写图片描述

那我如果要路由到其他页面呢？

那我们来建一个页面来让他渲染

two.js

import React from 'react';import styled from 'styled-components';const H3= styled.h3`  background-color: #a11`;export default React.createClass({  render(){    return (      i am two h3
    );  }}) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14

这是一个最基本的页面，就不解释了（建议手打，找找手感）

需要修改的知识main.js里的render部分

render((  
       
        
      
    
   ), document.getElementById('app')) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7

浏览器输入http://localhost:8080/#/two 看看效果吧

因为主件可以是单一控件，也可以是试图组，所以Router也是，它可以嵌套多个<route>

新建一个 three.js试试吧

import React from 'react';import styled from 'styled-components';const H2 = styled.h2`  color: #eee`;export default React.createClass({  render(){    return(      i am three H2
    )  }}) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15

页面和two.js一样所以可以copy下。

我们强行让three嵌套入first

修改如下

render((  
       
          
         
         
       
     
    
   ), document.getElementById('app')) 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8

其实现在的内容就是

输入http://localhost:8080/#/three看看吧

这里写图片描述

这一篇简单的介绍下这一套姿势如何简单的使用，其实react大多数功能都是如此，封装的简单易用，下一篇还会讲路由相关

周末愉快！！！

你可能感兴趣的文章