React - React-Router的简单介绍

港控/mmm° 2022-04-14 02:49 184阅读 0赞

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

为什么要使用路由？

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

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

3：语义化组织资源

Router路由实现的基本结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

<Router>
            <div>
              <ul id="menu">
                <li>
                  <Link to="/home">Home</Link>
                </li>
                <li>
                  <Link to="/hello">Hello</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
              </ul>
    
              <div id="page-container">
                <Route path="/home" component={Home} />
                <Route path="/hello" component={Hello} />
                <Route path="/about" component={About} />
              </div>
            </div>
          </Router>

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

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

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

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

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

React-Router特性

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

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

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

![20181123145850973.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 4][]

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

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

![20181123151316420.png][]![20181123151328610.png][]

点击home后显示了俩个Home。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 5][]

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

3：三种路由实现

1：URL路由

2：Hash路由

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

URL路由

![20181123152000118.png][]

BrowerRouter

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 6][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 7][]

Hash路由

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

HashRouter

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 8][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 9][]

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

3：内存路由

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

import { MemoryRouter } from "react-router";

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 10][]使用的时候将<Router>变成<MemoryRouter>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 11][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 12][]

可以看出，其实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 <h1>home</h1>;
      }
    }
    class About extends React.Component {
      render() {
        return <h1>about</h1>;
      }
    }
    class Index extends React.Component {
      render() {
        return <h1>index</h1>;
      }
    }
    
    class App extends React.Component {
      render() {
        return (
          <MemoryRouter>
           <div>
            <ul id="menu">
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/index">Index</Link>
              </li>
            </ul>
            <div id="page-container">
              <Route path="/home" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/index" component={Index} />
            </div>
            </div>
          </MemoryRouter>
        );
      }
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220414/562b3b361a2d421694fdd224f6325747.png
[20181123145850973.png]: /images/20220414/105575df6854474897e1f047a4aed6e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220414/fe02aa96467a4d9fa9d224d00147857e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2]: /images/20220414/52d0788fef33449bbb51dfe73e437ce4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 3]: /images/20220414/49101b2899c149ebac19eb8745b771b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 4]: /images/20220414/77416977284047f6ae33026fdd3c05d6.png
[20181123151316420.png]: https://img-blog.csdnimg.cn/20181123151316420.png
[20181123151328610.png]: /images/20220414/0b9f79a0629b46f8b5157b978e723520.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 5]: /images/20220414/d12594c2c9b2458ca6bd92e71e40b941.png
[20181123152000118.png]: /images/20220414/dc3a83315fea4d92994580807e066f28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20181123152159598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 7]: /images/20220414/c86c4be3fd124e389ab86de2c5b64b94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20181123152350900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 9]: /images/20220414/4892806dd4f34f7caba4d6164ad5a907.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 10]: /images/20220414/33c5a8cee0154d89b39b15db4bf3a05e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20181123152841798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 12]: /images/20220414/09605ada1c114108937b4e6054b69af1.png