关于react-router的几种设置体式格局

2019年8月25日 136次阅读 来源: echoLC

路由的观点

路由的作用就是将url和函数举行映照，在单页面运用中路由是必不可少的部份，路由设置就是一组指令，用来通知router怎样婚配url，以及对应的函数映照，即实行对应的代码。

react-router

每一门JS框架都邑有本身定制的router框架，react-router就是react开辟运用御用的路由框架，现在它的最新的官方版本为4.1.2。本文给人人引见的是react-router比拟于其他router框架更天真的设置体式格局，人人能够依据本身的项目须要挑选适宜的体式格局。

1.标签的体式格局

下面我们看一个例子：

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
  render() {
    return <div>Welcome to the app!</div>
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      {/* 当 url 为/时衬着 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

我们能够看到这类路由设置体式格局运用Route标签，然后依据component找到对应的映照。

  • 这里须要注重的是IndexRoute这个有点不一样的标签，这个的作用就是婚配’/’
    的途径，由于在衬着App全部组件的时刻，能够它的children还没衬着，就已经有’/’页面了，你能够把IndexRoute当做首页。

  • 嵌套路由就直接在Route的标签中在加一个标签，就是这么简朴

2.对象设置体式格局

有时刻我们须要在路由跳转之前做一些操纵，比方用户假如编辑了某个页面信息未保留，提示它是不是脱离。react-router供应了两个hook，onLeave在所有将脱离的路由触发，从最基层的子路由到最外层的父路由，onEnter在进入路由触发，从最外层的父路由到最基层的自路由。

让我们看代码：

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) {
              //do something
            }
          }
        ]
      }
    ]
  }
]

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

3.按需加载的路由设置

在大型运用中，机能是一个很主要的题目，按须要加载JS是一种优化机能的体式格局。在React router中不仅组件是能够异步加载的，路由也是许可异步加载的。Route 能够定义 getChildRoutes，getIndexRoute 和 getComponents 这几个函数，他们都是异步实行的，而且只要在须要的时刻才会挪用。

我们看一个例子：

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

这类体式格局须要合营webpack中有完成代码拆分功用的东西来用，实在就是把路由拆分红小代码块，然后按需加载。

    原文作者：echoLC
    原文地址: https://segmentfault.com/a/1190000010318444
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞