Month: August 2018

React Router V4使用介绍(一)

本文将和大家一起来看一下react router V4的使用,主要是通过一些实例来给大家展示如何编写一些代码。 环境准备 首先,我假设你基本的环境tool已经有了,比如npm,node等都已经装好了。 根据react官网,使用下面命令创建一个react的app React-router-tutorial-V4\lessons>npx create-react-app 01-setting-up 一切完成之后,让我们运行一下看看效果如何: npm start 这是我们最经典的react demo界面了,下面我们对代码做一些调整。把App.js中的代码进行一些简化,就直接返回一个div好了     这样我们看到的ui界面就如下所示了: 下面我们回到主题,我们要学习的是react router,所以,是时候加入react router了。 npm install –save react-router 在react router v4中,我们其实把router分成了三个包,除了我们之前熟悉的react-router外,还有两个包一个是react-router-dom,一个在react-router-native。这两个包其实是为了不同的运行环境提供其所需的特定组件。前者服务于我们常见的桌面浏览器,后者则专用于native部分。因此,我们再安装一下react router dom。 npm install –save react-router-dom 其实,react-router-dom中也包含了react-router的内容,只要安装它也就可以了。喜欢代码整洁,并不考虑跨平台移植代码的同学可以直接只使用react-router-dom。 至此,我们的环境准备部分就结束了。 假如你想直接使用我们相应的code,可以从github中直接下载相应的code: https://github.com/xdyang1986/React-router-tutorial-V4.git 基本router的rendering 首先我们需要让我们的url和对应的页面保持一致,也就是说在改变url,浏览器前进后退等操作的时候,我们能够同步对应的页面进行显示。在react router中目前提供了两种方法,一种是<BrowserRouter>,一种是<HashRouter>,前者是使用HTML5的history API(pushState, replaceState和poststate event)来保持同步的,后者则是使用URL的hash(比如window.location.hash)来保持URL和UI的同步的。需要重点注意的,<HashRouter>目前不支持location.key和location.state。总得来说,<HashRouter>更多的是为了和之前的浏览器兼容,目前还是推荐使用<BrowserRouter>。 所以,我们在代码中使用BrowserRouter。 先import我们需要使用的内容,下面再加入对应的route 这是我们可以看到其实浏览器的显示并没有什么特别大的改变,但其实此时我们是有了很多关于history的信息处理的,下面我们来多加入几个页面进行测试。 在src目录下加入About.js和Repos.js About.js    Repos.js 这时,我们继续修改index.js文件,为这几个page加上route: 这时,我们再进行测试,主要测试这两个页面: http://localhost:3000/about 以及http://localhost:3000/repos 并做一些浏览器的前进和后退的操作,我们可以看到一切和我们预想的还是一样的。 Link的使用 在我们的项目中其实用的比较多的就是link,达到的效果就是click某一个link之后,就会跳转到某一个页面,click另一个link则会跳转到另外一个页面,在react reouter里面可以通过link来简单实现。我们直接修改app.js如下,import进link 这是,打开对应的网页如下所示: 我们点击对应的about和repos超链接,可以到达不同的页面:…

Read More »