React实战-通过ReactRouter-example分析Router用法

淩亂°似流年 2022-09-26 02:09 203阅读 0赞

React实战\-通过ReactRouter-example分析Router用法

在我们了解完一种新的Web框架或者语言后，总是从各个单个的知识点了解，做着一个一个Demo,等到我们开始去做一个项目或产品时，需要解决的问题又趋于相同。我们常常感叹使用C\\C++,Java、C\#等各种不同的语言，解决问题的方式也趋于一致（微信:react-javascript）。

我们在搭建用户UI首先需要解决的是界面的导航问题，解决的方式当然有很多种，然而一种通用的方式就是定义导航配置文件，在程序中读取配置文件路径，依据用户的不同选择，展示不同的页面。有时也会感叹IT什么时候就变成了一个青春饭的工作，所谓青春饭，无非是年老了就干不了了，所谓年老也并非真的年老，所谓年老干不了也就是经验无足轻重，细细想来，作为技术人员能在一个领域深耕，或者用一种语言用一辈子是幸福的。新的语言，新的框架不过是将以前面临的问题，采用另一种语言同样的方式再实现一遍，好似一种新的体验，其实除了换种语言的特质外，所得甚少，大概这就是程序员成为青春饭的一个重要原因吧。也可能是中国软件人员成为永远的跟随者的一个原因。与其做永远的追随者，不如扎根一处。又扯远了，还是看看Router的example里的页面路由方式吧。

Router的example有很多个，涉及各种模式，但是如果只从使用来看，我们可以只关注几个主要的模式，等到遇到复杂问题再去深究为妙。

定义页面导航要关注以下几个问题基本上就能满足一个简单应用的需要：

l 如何定义导航数据结构

l 如何向页面传递参数

l 如何定义页面切换事件及规则检验

下面我们看看router的examples中是如何处理的。

1.如何定义导航数据结构

在Router中可以采用Router、Route等标签定义一个树形结构，如下：

</Route>

</Router>

或者定义一个导航的数据结构对象：

const routeConfig = \[