React Router V4使用介绍(一)

本文将和大家一起来看一下react router V4的使用,主要是通过一些实例来给大家展示如何编写一些代码。

环境准备

首先,我假设你基本的环境tool已经有了,比如npmnode等都已经装好了。

根据react官网,使用下面命令创建一个reactapp

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

基本routerrendering

首先我们需要让我们的url和对应的页面保持一致,也就是说在改变url,浏览器前进后退等操作的时候,我们能够同步对应的页面进行显示。在react router中目前提供了两种方法,一种是<BrowserRouter>,一种是<HashRouter>,前者是使用HTML5history APIpushState, replaceStatepoststate event)来保持同步的,后者则是使用URLhash(比如window.location.hash)来保持URLUI的同步的。需要重点注意的,<HashRouter>目前不支持location.keylocation.state。总得来说,<HashRouter>更多的是为了和之前的浏览器兼容,目前还是推荐使用<BrowserRouter>

所以,我们在代码中使用BrowserRouter

import我们需要使用的内容,下面再加入对应的route

这是我们可以看到其实浏览器的显示并没有什么特别大的改变,但其实此时我们是有了很多关于history的信息处理的,下面我们来多加入几个页面进行测试。

src目录下加入About.jsRepos.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如下,importlink

这是,打开对应的网页如下所示:

我们点击对应的aboutrepos超链接,可以到达不同的页面:

React Router的布局

我们都知道布局很重要,之前我们使用嵌套route进行布局的,那么在react router v4中,我们不再支持嵌套route,但可以把route直接当着component来使用。

下面我来看这样的scenario,我们希望aboutrepos这两个link一直在所有的页面中显示,就像我们通常见到的headerrooter一样。

我们首先来添加一个layout的界面如下:

然后修改index直接import这里的primarylayout就可以了:

当然我们也要把app.js修改成我们想要的简单page

这样之后,我们就可以来试验一下效果了,我们点了上面的link之后只有下面的content在变,而上面的headerlink则是没有变化。

至此,react router v4的第一部分介绍就到此结束了,相关的code可以参见如下github地址: https://github.com/xdyang1986/React-router-tutorial-V4


转载请注明出处: https://www.softlifelogging.com/?p=229&preview=true

更多精彩内容,敬请关注公众号: 随手记生活。

No Comments

Leave a Reply

Your email address will not be published.