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

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等标签定义一个树形结构，如下：

 <Router history={history}>

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

      <Route path="user/:userID" component={User}>

        <Route path="tasks/:taskID" component={Task} />

        <Route path="todos/:taskID" component={Task} />

      </Route>

    </Route>

  </Router>

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

const routeConfig = [

  { path: '/',

    component: App,

    indexRoute: { component: Dashboard },

    childRoutes: [

      { path: 'about', component: About },

      { path: 'inbox',

        component: Inbox,

        childRoutes: [

          { path: '/messages/:id', component: Message },

          { path: 'messages/:id',

            onEnter: function (nextState, replaceState) {

              replaceState(null, '/messages/' + nextState.params.id)

            }

          }

        ]

      }

    ]

  }

]

React.render(<Router routes={routeConfig} />, document.body)

从以上两种配置可以看出，尽管表现形式不同但思想是一种的，建立一个以‘/’为根目录的树形结构。当我们定义完了这种树形结构后，就能在任何页面任何位置，通过Router的Link标签定义我们想导航的地方。如：

<Link to="/user/123" >Bob</Link>

2.如何向页面传递参数

我们在进入某个页面时，常常需要传入各种参数，页面根据参数值展示不同的数据。在Router中一般在配置文件中之间定义参数：

<Route path="tasks/:taskID" component={Task} />

参数匹配主要有: , (), *等几种方法。

在Link中传人参数：

 <li><Link to="/user/123" activeClassName="active">Bob</Link></li>

或者

 <li><Link to={`/user/${userID}/tasks/foo`} activeClassName="active">foo task</Link></li>

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

Router提供了在页面进入和离开的两个事件onEnter和onLeave，基本满足了在页面进入时的权限设置和页面跳转时的规则判断。

通过Lifecycle mixin定义页面跳转判断

 mixins: [ Lifecycle, History ],

 getInitialState() {

    return {

      textValue: 'ohai'

    }

  },

  routerWillLeave() {

    if (this.state.textValue)

      return 'You have unsaved information, are you sure you want to leave this page?'

  },

4.其他

除了通过配置文件转化路径外，更简单粗暴的方式是通过history设置导航路径。