React - React-Router的简单介绍

Router中文意思是路由，以前多见于后端，现如今前端也有自己的路由。

为什么要使用路由？

1：单页页面实现页面的切换

2：可以通过URL对页面进行定位

3：语义化组织资源

 

Router路由实现的基本结构

首先是路由的定义，我们通过配置文件，或者React-Router的标记来定义路由，

这些我们定义好的路由被React-Router解析，然后将对应的组件render出来，在哪里渲染了？

所以我们需要定义一个组件容器，这个组件容器是页面的一部分，只不过是被React-Router控制，由它决定渲染那个组件。

当URL变化时，只是组件容器发生了变化，其他部分，如导航栏，header等都不会受它的影响。

简单看一下，什么是路由。

      
        

          

            

              Home
            
            

              Hello
            
            

              About
            
          

          

            
            
            
          
        
      

我们可以看到最前面是一个Router的定义，表示里面的代码需要React-Router来解析。

注意到我们定义了三条路由，通过标记实现的，标记展示情况和一样，只不过点击它时，不会交给浏览器处理（刷新页面），而是交给React-Router处理，通过Route来决定渲染那个组件。

然后定义了一个容器#page-container, 这就是受到React-Router控制的容器组件，

我们通过Route标记来配置我们上面定义的三条路由

举个栗子：当前URL为'/home'时，那么就用Home这个组件展示。

 

React-Router特性

1：声明式路由定义。（也就是说我们可以像使用标记 , ,等一样使用路由，而不是像后端需要路由表）

2：动态路由。 （与之对比的就是后端的静态路由，也就是一个路由表（一个配置文件）。而React-Router是在页面被Render时才会被实时的解析的。）

 

React-Router的API （仅仅简单介绍一下）

标记：普通链接，展现情况和一样，特点在于不会造成浏览器刷新，而是有React-Router接管，to属性表示连接的URL地址。

标记：和十分相似，只不过它可以增加css 。如上图，当被点击时，就会被添加selected（一个css 的class）。

标记：满足条件是提示用户是否离开当前页面

when属性表示什么时候调用，message提示语。

比如一个用户正在写表单，但是点击了一个连接，你就可以提示用户是否想要离开此页面。

:重定向当前页面。当用户登录后，根据登录情况判断是否进入用户界面，还是回到登录页面。

标记：用于路径匹配显示相应的组件

exact表示是否精确匹配，当'/'后面还有东西的话，那么就不会渲染Home组件。如果没有exact，那么'/news'将会匹配到俩个组件Home,NewsFeed,而且都会被渲染。这一点是值得注意的。无排它性。

点击home后显示了俩个Home。

 

标记：只会显示匹配的第一条路由。（谁先匹配到了，就显示谁的组件，不会继续往后看）

 

3：三种路由实现

1：URL路由

2：Hash路由

大部分情况下，都可以使用URL路由，使用Hash路由是为了兼容一些老的浏览器

URL路由

BrowerRouter

Hash路由

import { HashRouter as Router, Route, Link } from "react-router-dom";

HashRouter

仅仅是URL上面多了一点东西

3：内存路由

内存路由表示路由不会在URL表现出来，而是在内存中，通常是服务器端用

import { MemoryRouter } from "react-router";

使用的时候将变成

可以看出，其实URL并没有什么变化。

代码可以调试一下

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { MemoryRouter } from "react-router";

import "./styles.css";

class Home extends React.Component {
  render() {
    return 
home
;
  }
}
class About extends React.Component {
  render() {
    return 
about
;
  }
}
class Index extends React.Component {
  render() {
    return 
index
;
  }
}

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

        

          

            Home
          
          

            About
          
          

            Index
          
        
        

          
          
          
        
        
      
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);