P02: 使用ReactRouter制作网页

一时失言乱红尘 2023-10-06 20:58 2阅读 0赞

#### React Router ####

*  阐述
 *  编写Index组件
 *  编写List组件
 *  修改 \`AppRouter.js\` 文件
 *   *  exact 精准匹配的意思

## 阐述 ##

通过上节的学习，你可能发现这和我们平时工作中见到的不太一样，现实中是每个页面都是一个完整的有状态组件，然后我们再进行跳转，而不是写在一个页面里的多个无状态组件。

所以觉的不太适用，本文就把上节课的案例，做成我们工作中的样子，或者说更贴合实际开发，同时还会讲解一下精确匹配的知识。

## 编写Index组件 ##

先在 `/src` 目录下建立一个文件夹，这里起名叫做 `Pages`（你可以起任何名字），然后建立一个组件文件 `Index.js`。这里边我们就完全按照工作中的模式来写，只是没有什么业务逻辑，UI也制作的相当简单。

代码如下：  
`ReactRouterDemo\demo01\src\Pages\Index.js`

import React, {
         Component } from 'react';
    
    class Index extends Component {
        
        constructor(props) {
        
            super(props);
            this.state = {
          }
        }
        render() {
         
            return (  <h2>Home willem</h2> );
        }
    }
    
    export default Index;

## 编写List组件 ##

编写完Index组件以后，继续编写List组件。  
其实这个组件和Index基本一样。  
代码如下:  
`ReactRouterDemo\demo01\src\Pages\List.js`

import React, {
         Component } from 'react';
    
    class List extends Component {
        
        constructor(props) {
        
            super(props);
            this.state = {
          }
        }
        render() {
         
            return (  <h2>List Page</h2> );
        }
    }
    
    export default List;

## 修改 `AppRouter.js` 文件 ##

两个组件制作完成后，我们把它引入路由配置文件，然后进行路由的配置就可以了，  
代码如下：

import React from "react";
    import {
         BrowserRouter as Router, Route, Link } from "react-router-dom";
    import Index from './Pages/Index'
    import List from './Pages/List'
    
    function AppRouter() {
        
      return (
        <Router>
            <ul>
                <li> <Link to="/">首页</Link> </li>
                <li><Link to="/list/">列表</Link> </li>
            </ul>
            <Route path="/" exact component={
        Index} />
            <Route path="/list/" component={
        List} />
        </Router>
      );
    }
    
    export default AppRouter;

现在看起来就和我们实际工作中差不多了，也和我们平时写的普通html页面很类似了。

![在这里插入图片描述][754edcd4a8ea460ea93970a15223e2ac.gif_pic_center]

### exact 精准匹配的意思 ###

精准匹配到底是什么？  
其实这个很好理解，从字面上就可以猜出结果，就是你的路径信息要完全匹配成功，才可以实现跳转，匹配一部分是不行的。

比如我们把Index的精准匹配去掉，你会发现，无论你的地址栏输入什么都可以匹配到Index组件，这并不是我们想要的结果。

所以我们加上了精准匹配 exact。  
你可以再试着访问一下List组件，来更深入的了解一下精准匹配。

[754edcd4a8ea460ea93970a15223e2ac.gif_pic_center]: https://img-blog.csdnimg.cn/754edcd4a8ea460ea93970a15223e2ac.gif#pic_center