澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

澳门官方平台:React Router v4 入坑指南

登时入门

安装:npm i -S react-router react-router-dom

GitHub:ReactTraining/react-router

澳门官方平台:React Router v4 入坑指南。React Router中有三种类型的组件:路由器组件(BrowserRouter卡塔尔,路由非常组件(Route卡塔尔国和导航组件(Link卡塔尔(قطر‎。

万恶的来源

相距React Router v4 正式颁发也早就过去三个月了,这周把叁个React的架子做了进级,早前的路由用的依然v2.7.0版的,所以决定把路由也进级下,恰巧“尝尝鲜”...

俗尘传达,方今官方同时爱抚 2.x 和 4.x 五个本子。(ヾ(。ꏿ﹏ꏿ卡塔尔(قطر‎ノ゙咦,此刻相信机智如小编的您也会意识,ReactRouter v3 去何方了?整丢了??巴拉出锅了???敢不敢给自个儿个圆满的表达!?)事实上 3.x 版本对照于 2.x 并从未引进任何新的性状,只是将 2.x 版本中部分遗弃 API 的 warning 移除掉而已。依据规划,未有历史包袱的新类型想要使用稳固版的 ReactRouter 时,应该使用 ReactRouter 3.x。前段时间 3.x 版本也还处在 beta 阶段,可是会先于 4.x 版本正式发布。假如你以前在应用 2.x 的版本,那么升级3.x 将不会有任何附加的代码变动。

路由器

每种React Router应用程序的主导应该是一个路由器组件。

对于Web项目,react-router-dom提供BrowserRouterHashRouter路由器。

路由器会满含全体路由组件。须求潜心路由器节点下只好贰个根节点。

礼貌性简单介绍下

react router v4.jpg

React Router V4 相较于前方多个本子有根天性别变化化,首先是依照Just Component的 API 设计意见,其次API方面也简单了不菲,对生手来讲减弱了深造难度,但如倘诺对以前项目标重构,嗯,大约无**可说。这次升迁的基本点特色如下:

  • 声明式(Declarative)
  • 可组合 (Composability)

React Router V4 遵循了 React 的理念:万物皆组件。因而 进级之后的 Route、Link、Switch等都以四个常备的零器件。

React Router V4 基于 Lerna 管理八个 Repository。在这里代码库包涵:

  • react-router React Router 核心
  • react-router-dom 用于 DOM 绑定的 React Router
  • react-router-native 用于 React Native 的 React Router
  • react-router-redux React Router 和 Redux 的集成
  • react-router-config 静态路由布置扶助助手

路由非常组件

Route:

path路线(string): 路由相当路线。(未有path属性的Route 总是会 相称);
exact精准(bool):为true时,则须要路线与location.pathname必得完全协作;
strict严厉(bool):为true时,有最后斜线的门道只可以合作有斜线的location.pathname;

strict示例:

路径 location.pathname strict 是否匹配
/one/ /one true
/one/ /one/ true
/one/ /one/two true

路由示例:

import {
    HashRouter as Router,
    Route,
    Link,
    NavLink,
    Switch
} from 'react-router-dom';

import App from './App.js';


function NavBar(){
    return (
        <Router>
            <div>
                <Route component={Nav} />
                <Switch>
                    <Route exact path='/' component={() => (<div>hello</div>)} />
                    <Route path='/app' component={App} />
                </Switch>
            </div>
        </Router>
    );
}

插件初引进

通常说来我们在 React 的使用中,平时要引入八个包,reactreact-dom,那么react-routerreact-router-dom是或不是五个都要援引呢?留意,前方高能,入门第大器晚成坑就在这里边。他们七个举个例子援引贰个就能够了,不相同之处正是前面一个比后面一个多出了<Link> <BrowserRouter>这么的 DOM 类组件。由此大家只需引用react-router-dom这几个包就OK了。当然,假设搭配redux,你还亟需使用react-router-redux

导航组件

Link:在应用中,提供导航作用

NavLink:Link的一个极度版本,当相配钦赐U翼虎L的时候,会给成分增加style

示例:

<Link to="/profile"/>
<NavLink to="/profile" activeStyle={{color:'red'}}/>

重大组件简要介绍

Code Split

应用Router的Code Split(按需加载卡塔尔(قطر‎信赖webpack(暗中认可扶助卡塔尔(英语:State of Qatar)、babel-plugin-syntax-dynamic-import和react-loadable。

babel-plugin-syntax-dynamic-import: 意味着Babel管理时不会做任何额外的转移。该插件只是允许贝布el分析动态导入

npm i babel-plugin-syntax-dynamic-import react-loadable -S

.bashrc:

{
  "presets": [
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

代码示例:

import Loadable from 'react-loadable';

function Loading(){
  return (
    <div> Loading... </div>
  )
}

const Clock = Loadable({
  loader: () => import('./Clock'),
  loading: Loading,
});

export default class LoadableClock extends React.Component {
  render() {
    return <Clock />;
  }
}

<Router>

在4.0事情未发生前版本的 API 中,<Router> 组件的 children 只好是 React Router 提供的各个构件,如<Route>、<IndexRoute>、<Redirect>等。而在 React Router 4 中,你能够将各个零构件及标签放进 <Router>零零器件中,他的角色也更疑似 Redux 中的 <Provider>不一致的是<Provider>是用来维持与 store 的修正,而<Router>是用来维系与 location 的协同。亲自过问如下:

// 示例1
<Router>
    <div>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/topics">主题列表</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>

Router是全体路由组件共用的平底接口,日常我们的施用并不会利用这些接口,而是接收高等的路由:

  • <BrowserRouter>:使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步;
  • <HashRouter>:使用 URL 的 hash (例如:window.location.hash) 来保持 UI 和 URL 的同步;
  • <MemoryRouter>:能在内部存款和储蓄器保存你 “U中华VL” 的历史纪录(并从未对地方栏读写卡塔尔国;
  • <NativeRouter>:为利用React Native提供路由扶助;
  • <StaticRouter>:从不会转移地址;

TIPS:算是第二坑吧,和以前的Router区别等,这里<Router>零器件下只允许存在一个子成分,如存在多少个则会报错。

反面标准在此边:

// 示例2
<Router>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/topics">主题列表</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
  </Router>

没错,示例2在没有<div>阿爹的护卫下,会报如下格外消息:

error.jpg

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:澳门官方平台:React Router v4 入坑指南

相关阅读