P02: 使用ReactRouter制作网页

通过上节的学习,你可能发现这和我们平时工作中见到的不太一样,现实中是每个页面都是一个完整的有状态组件,然后我们再进行跳转,而不是写在一个页面里的多个无状态组件。所以觉的不太适用,本文就把上节课的案例,做成我们工作中的样子,或者说更贴合实际开发,同时还会讲解一下精确匹配的知识。

编写Index组件

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

import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>mybj123.com</h2> );
    }
}

export default Index;

编写List组件

编写完Index组件以后,继续编写List组件。其实这个组件和Index基本一样。代码如下:

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页面很类似了。

exact精准匹配的意思

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

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

<Route path="/" component={Index} />

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

本文内容就这些,不要走开,更好的在后面。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P02: 使用ReactRouter制作网页

发表评论

提供最优质的资源集合

立即查看 了解详情