React路由管理之React,router的两种配备格局详解

永利皇宫402

本文介绍有关react-router的两种配备格局详解,分享给大家,具体如下:

React项目一般都有成都百货上千的UQashqaiL要求管住,最常使用的减轻方案就是React
Router了,近些日子学习了一晃,首假设看了一晃法定的英文文档,加以总计,以备后查。

路由的定义

React Router是做哪些的吧,官方的牵线是:

路由的功用正是将url和函数进行映射,在单页面应用在那之中由是不可缺少的片段,路由安排正是1组命令,用来报告router如何相配url,以及对应的函数映射,即进行相应的代码。

A complete routing library for React,keeps your UI in sync with the
URL. It has a simple API with powerful features like lazy code
loading, dynamic route matching, and location transition handling
built right in. Make the URL your first thought, not an after-thought.

永利皇宫402,react-router

忽略即:让UI组件和USportageL保持同步,通过简单的API就可以兑现庞大的特征如:代码懒加载,动态路由特别,路线过渡管理等。

每1门JS框架都会有谈得来定制的router框架,react-router就是react开垦应用御用的路由框架,近来它的新星的法定版本为四.壹.二。本文给大家介绍的是react-router相比较于任何router框架更加灵敏的布置格局,我们能够依据自身的体系须求选取适合的措施。

上面是一些React Router的用法:

壹.标签的办法

壹 轻易渲染Route

上边我们看一个例证:

有有个别索要牢记于心,Router 是作为贰个React组件,能够实行渲染。

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)
// ...
import { Router, Route, hashHistory } from 'react-router'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))

咱俩得以见见这种路由配置格局选取Route标签,然后依照component找到呼应的投射。

那边运用了hashHistory – 它管理路由历史与U大切诺基L的哈希部分。

  1. 那边需求注意的是IndexRoute这几个有一些不雷同的标签,那个的成效正是相称’/’的门径,因为在渲染App整个组件的时候,或者它的children还没渲染,就已经有’/’页面了,你可以把IndexRoute当成首页。
  2. 嵌套路由就径直在Route的价签中在加七个标签,正是这么轻易

加上更加多的路由,并点名它们对应的机件

贰.对象配置格局

import About from './modules/About'
import Repos from './modules/Repos'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Router>
), document.getElementById('app'))

奇迹大家须要在路由跳转在此以前做一些操作,比如用户①旦编辑了某些页面音讯未保存,提示它是不是离开。react-router提供了三个hook,onLeave在享有将偏离的路由触发,从最下层的子路由到最外层的父路由,onEnter在进入路由触发,从最外层的父路由到最下层的自路由。

二 Link

让我们看代码:

// modules/App.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
 render() {
  return (
   <div>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </div>
  )
 }
})
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)

那边运用了Link 组件,它能够渲染出链接并选用 to 属性指向相应的路由。

叁.按需加载的路由配置

3 嵌套路由

在大型应用中,质量是三个很重大的标题,按须求加载JS是壹种优化品质的艺术。在React
router中不只有组件是足以异步加载的,路由也是同意异步加载的。Route 能够定义
getChildRoutes,getIndexRoute 和 getComponents
那多少个函数,他们都以异步施行的,并且唯有在急需的时候才会调用。

要是大家想增多贰个导航栏,要求存在于各类页面上。假诺未有路由器,我们就供给封装三个三个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的加强代码会显得很冗余。React-router则提供了另壹种方法来嵌套共享UI组件。

咱俩看一个例子:

实质上,大家的app都以壹各种嵌套的盒子,对应的url也能够表达这种嵌套关系:

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'))
  })
 }
}
<App>    {/* url /     */}
 <Repos>  {/* url /repos   */}
  <Repo/> {/* url /repos/123 */}
 </Repos>
</App>

这种措施须要相称webpack中有落实代码拆分功用的工具来用,其实正是把路由拆分成小代码块,然后按需加载。

从而,能够通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav
等集体部分可以共享:

如上正是本文的全体内容,希望对大家的求学抱有扶助,也愿意大家多多扶助脚本之家。

// index.js
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
   <Route path="/repos" component={Repos}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

您或者感兴趣的文章:

  • 简言之谈谈React中的路由系统
  • React
    子组件向父组件传值的艺术
  • React
    Native实现进程条弹框的示范代码
  • ReactNative之键盘Keyboard的弹出与未有示例
  • react-native
    封装选用弹出框示例(试用ios&android)
  • 详解Angular Reactive Form
    表单验证
  • react体系从零早先_归纳谈谈react
  • React利用插件和毫无插件达成双向绑定的法子详解
  • 详解React 1陆 中的十分管理

接下去,在App中将children渲染出来:

// modules/App.js
// ...
 render() {
  return (
   <div>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>

    {/* 注意这里将子组件渲染出来 */}
    {this.props.children}

   </div>
  )
 }
// ...

肆 有效链接

Link组件和a标签的分裂点之一就在于Link能够知晓其针对性的不二等秘书籍是不是是多个管用的路由。

<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>

能够利用 activeStyle
钦赐有效链接的体制,也能够选用activeClassName钦赐有效链接的样式类。

大部时候,大家并无需知道链接是不是行得通,但在导航中这几个特点则特别首要。比方:能够在导航栏中只体现合法的路由链接。

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
 render() {
  return <Link {...this.props} activeClassName="active"/>
 }
})


// modules/App.js
import NavLink from './NavLink'

// ...

<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

能够在NavLink中钦赐只有 .active
的链接才显得,那样只要路由无效,则该链接就不会现出在导航栏中了。

五 URL参数

考虑上边包车型大巴url:

/repos/reactjs/react-router
/repos/facebook/react

她俩或然对应的是这种方式:

/repos/:userName/:repoName

:前面是可变的参数

url中的可变参数能够由此 this.props.params[paramsName] 获取到:

// modules/Repo.js
import React from 'react'

export default React.createClass({
 render() {
  return (
   <div>
{/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
    <h2>{this.props.params.repoName}</h2>
   </div>
  )
 }
})



// index.js
// ...
// import Repo
import Repo from './modules/Repo'

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意这里的路径 带了 :参数 */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

接下去访问 /repos/reactjs/react-router 和 /repos/facebook/react
就能够看到不相同的始最终。

陆 私下认可路由

// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'

// ...

render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>

   {/* 注意这里* /}
   <IndexRoute component={Home}/>

   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

此间增多了IndexRoute来钦点私下认可的不二等秘书技 /
所对应的零部件。注意它未有path属性值。

同理也是有 默许链接组件 IndexLink。、

七 使用Browser History

前方的例证一向选拔的是hashHistory,因为它直接能够运作,但越来越好的措施是行使Browser
History,它能够不依赖哈希端口 (#)。

第壹须求改 index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'

render((
{/* 注意这里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))

援助须求 修改webpack的地点服务配置,张开 package.json 增添–history-api-fallback :

复制代码 代码如下:

“start”: “webpack-dev-server –inline –content-base .
–history-api-fallback”

最后索要在 index.html中 将文件的门径改为相对路径:

<!-- index.html -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >

<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>

诸如此类就去掉了url中的 # 。

如上便是本文的全体内容,希望对大家的求学抱有匡助,也可望大家多多协助脚本之家。

你可能感兴趣的小说:

  • React从react-router路由上做登录验证调控的不贰诀要
  • 详解React-Router中Url参数改动页面不刷新的化解办法
  • react
    router四+redux完结路由权力决定的点子
  • React Router v4入坑指南(小结)
  • 在react-router肆中进行代码拆分的艺术(基于webpack)
  • react-router肆 合作webpack require.ensure
    完结异步加载的示范
  • react-router
    v四怎么样利用history调节路由跳转详解
  • 至于react-router/react-router-dom v4history不能够访问难点的消除
  • 详解react-router 四.0
    下服务器怎么样合作BrowserRouter

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图