入坑指南,路由陈设方式小结

By admin in web前端 on 2019年6月11日

本文主要介绍了React-router v4
路由配置方法小结,分享给大家,也给自己留个笔记

React-router v4 路由配置方法小结,react-routerv4

本文主要介绍了React-router v4
路由配置方法小结,分享给大家,也给自己留个笔记

一. Switch 、Router
、Route三者的区别

1、Route

Route 是建立location 和 ui的最直接联系

2、Router

react-router v4
中,Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。

MemoryRouter、BrowserRouter、HashRouter 等于

import { Router } from 'react-router'
<!--这里可以有三种-->
<!--history 部分源码
exports.createBrowserHistory = _createBrowserHistory3.default;
exports.createHashHistory = _createHashHistory3.default;
exports.createMemoryHistory = _createMemoryHistory3.default;
-->
import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()

<Router history={history}>
 <App/>
</Router>

NativeRouter(给rn使用的)

A <Router> for iOS and Android apps built using React Native.

这里新增strict 和 exact

使用了strict location 大于等于path才能匹配,eq path=’/one’
location=’/one/a’能匹配。

使用了exact location 约等于 path 才能匹配,eq path=’/one’
location=’/one’或者 ‘/one/’能匹配,所以说是约等于。

使用了exact 和 strict location = path才能匹配

StaticRouter(后续补充)

3、Switch

这是v4版本中新添加,主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。

二、v4
版本中路由应该如何配置呢?

1.基本配置(这个和v3中基本一致,效果也基本一样)

匹配 <= location eq.( /b => / + /b ) ( / => / )

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div>
     <Route path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </div>
  </BrowserRouter>

2.含Switch 配置

匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <Switch>
       //这里用exact,仅仅是担心location被 path='/'截胡了。
     <Route exact path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </Switch>
  </BrowserRouter>

问题(三个问题)

1.如何设置公共的Component

第一种方式

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div>
     <Route path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </div>
  </BrowserRouter>

第二种方式(父子嵌套)

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div >
    <Route path="/" component={aContainer} />
    <Route path="/b" component={Parent} />
    {/* {app()} */}
   </div>
  </BrowserRouter>

const Parent = ({ match }) => (
 <div>
  <Route path={`${match.url}/`} component={bContainer} />
  <Route path={`${match.url}/c`} component={cContainer} />
  <Route path={`${match.url}/d`} component={dContainer} />
 </div>
);

这种情况 bContainer就是是公用的Component

2.如何设置getComponent,按需加载

另一篇文章 

3.是否有简化写法

npm install --save react-router-config

第一步 配置路由

const routes = [
 { component: bContainer,
  routes: [
   { path: '/',
    exact: true,
    component: bContainer
   },
   { path: '/b/b',
    component: bContainer,
    routes: [
     { path: '/b/b/b',
      component: bContainer
     }
    ]
   }
  ]
 }
]

第二步 设置路由

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div >
     {renderRoutes(routes)}
   </div>
 </BrowserRouter>

第三步 需要在container的render中去调用方法

 <div>
 1111
 {renderRoutes(this.props.route.routes)}
</div>

这个优势是可以统一配置,劣势是需要在container中统一调用,但是这个抽出来统一实现,问题也不大,并且还可以解决
问题一。

这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。

web前端 1

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

v4 路由配置方法小结,react-routerv4
本文主要介绍了React-router v4
路由配置方法小结,分享给大家,也给自己留个笔记 一. Switch 、…

距离React Router v4
正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”…

一. Switch 、Router
、Route三者的区别

江湖传言,目前官方同时维护 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 将不会有任何额外的代码变动。

1、Route

礼貌性简介下

Route 是建立location 和 ui的最直接联系

web前端 2

2、Router

React Router V4 相较于前面三个版本有根本性变化,首先是遵循 Just
Component
的 API
设计理念,其次API方面也精简了不少,对新手来说降低了学习难度,但如果是对之前项目的重构,嗯,简直无**可说。本次升级的主要特点如下:

react-router v4
中,Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。

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

MemoryRouter、BrowserRouter、HashRouter 等于

React Router V4 遵循了 React 的理念: 万物皆组件 。因此 升级之后的
Route、Link、Switch等都是一个普通的组件。

import { Router } from 'react-router'
<!--这里可以有三种-->
<!--history 部分源码
exports.createBrowserHistory = _createBrowserHistory3.default;
exports.createHashHistory = _createHashHistory3.default;
exports.createMemoryHistory = _createMemoryHistory3.default;
-->
import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()

<Router history={history}>
 <App/>
</Router>

React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括:

NativeRouter(给rn使用的)

  1. react-router React Router 核心
  2. react-router-dom 用于 DOM 绑定的 React Router
  3. react-router-native 用于 React Native 的 React Router
  4. react-router-redux React Router 和 Redux 的集成
  5. react-router-config 静态路由配置帮助助手

A <Router> for iOS and Android apps built using React Native.

插件初引入

这里新增strict 和 exact

通常我们在 React 的使用中,一般要引入两个包, react 和  react-dom
,那么 react-routerreact-router-dom 是不是两个都要引用呢?
注意,前方高能,入门第一坑就在这里
。他们两个只要引用一个就行了,不同之处就是后者比前者多出了
<Link> <BrowserRouter> 这样的 DOM 类组件。因此我们只需引用
react-router-dom 这个包就OK了。当然,如果搭配 redux ,你还需要使用
react-router-redux

使用了strict location 大于等于path才能匹配,eq path=’/one’
location=’/one/a’能匹配。

主要组件简介

使用了exact location 约等于 path 才能匹配,eq path=’/one’
location=’/one’或者 ‘/one/’能匹配,所以说是约等于。

在4.0之前版本的 API 中, <Router> 组件的 children 只能是 React Router
提供的各种组件,如 <Route>、<IndexRoute>、<Redirect> 等。而在 React
Router 4 中,你可以将各种组件及标签放进 <Router>
组件中,他的角色也更像是 Redux 中的 <Provider> 。**不同的是
<Provider> 是用来保持与 store 的更新,而 <Router> 是用来保持与
location 的同步。**示例如下:

使用了exact 和 strict location = path才能匹配

// 示例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>

StaticRouter(后续补充)

Router是所有路由组件共用的底层接口,一般我们的应用并不会使用这个接口,而是使用高级的路由:

3、Switch

  1. <BrowserRouter> :使用 HTML5 提供的 history API 来保持 UI 和 URL
    的同步;
  2. <HashRouter> :使用 URL 的 hash (例如:window.location.hash)
    来保持 UI 和 URL 的同步;
  3. <MemoryRouter> :能在内存保存你 “URL”
    的历史纪录(并没有对地址栏读写);
  4. <NativeRouter> :为使用React Native提供路由支持;
  5. <StaticRouter> :从不会改变地址;

这是v4版本中新添加,主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。

TIPS:算是第二坑吧,和之前的Router不一样,这里 <Router>
组件下只允许存在一个子元素,如存在多个则会报错。

二、v4
版本中路由应该如何配置呢?

反面典型在这里:

1.基本配置(这个和v3中基本一致,效果也基本一样)

<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>

匹配 <= location eq.( /b => / + /b ) ( / => / )

没错,示例2在没有 <div> 爸爸的保护下,会报如下异常信息:

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div>
     <Route path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </div>
  </BrowserRouter>

web前端 3

2.含Switch 配置

我们知道,Route组件主要的作用就是当一个location匹配路由的path时,渲染某些UI。示例如下:

匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配

<Router>
 <div>
 <Route exact path="/" component={Home}/>
 <Route path="/news" component={NewsFeed}/>
 </div>
</Router>

// 如果应用的地址是/,那么相应的UI会类似这个样子:
<div>
 <Home/>
</div>

// 如果应用的地址是/news,那么相应的UI就会成为这个样子:
<div>
 <NewsFeed/>
</div>
 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <Switch>
       //这里用exact,仅仅是担心location被 path='/'截胡了。
     <Route exact path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </Switch>
  </BrowserRouter>

<Route> 组件有如下属性:

问题(三个问题)

  1. web前端,path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
  2. exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
  3. strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;

1.如何设置公共的Component

再次奉上两个鲜活的例子:

第一种方式

exact配置:

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div>
     <Route path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </div>
  </BrowserRouter>
路径 location.pathname exact 是否匹配
/one /one/two true
/one /one/two false

第二种方式(父子嵌套)

 strict配置:

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div >
    <Route path="/" component={aContainer} />
    <Route path="/b" component={Parent} />
    {/* {app()} */}
   </div>
  </BrowserRouter>


const Parent = ({ match }) => (
 <div>
  <Route path={`${match.url}/`} component={bContainer} />
  <Route path={`${match.url}/c`} component={cContainer} />
  <Route path={`${match.url}/d`} component={dContainer} />
 </div>
);
路径 location.pathname strict 是否匹配
/one/ /one true
/one/ /one/ true
/one/ /one/two true

这种情况 bContainer就是是公用的Component

同时,新版的路由为 <Route> 提供了三种渲染内容的方法:

2.如何设置getComponent,按需加载

  1. <Route component> :在地址匹配的时候React的组件才会被渲染,route
    props也会随着一起被渲染;
  2. <Route render>
    :这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便;
  3. <Route children>
    :与render属性的工作方式基本一样,除了它是不管地址匹配与否都会被调用;

另一篇文章 

第一种方式没啥可说的,和之前一样,这里我们重点看下 <Route render>
的渲染方式:

3.是否有简化写法

// 行内渲染示例
<Route path="/home" render={() => <div>Home</div>}/>

// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={props => (
 <FadeIn>
  <Component {...props}/>
 </FadeIn>
 )}/>
)

<FadingRoute path="/cool" component={Something}/>
npm install --save react-router-config

TIPS: 第三坑! <Route component> 的优先级要比 <Route render>
高,所以不要在同一个 <Route> 中同时使用这两个属性。

第一步 配置路由

和之前版本没太大区别,重点看下组件属性:

const routes = [
 { component: bContainer,
  routes: [
   { path: '/',
    exact: true,
    component: bContainer
   },
   { path: '/b/b',
    component: bContainer,
    routes: [
     { path: '/b/b/b',
      component: bContainer
     }
    ]
   }
  ]
 }
]
  1. to(string/object):要跳转的路径或地址;
  2. replace(bool): 为 true 时
    ,点击链接后将使用新地址替换掉访问历史记录里面的原地址; 为 false
    ,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。
    默认为 false

第二步 设置路由

示例如下:

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div >
     {renderRoutes(routes)}
   </div>
 </BrowserRouter>
// Link组件示例

// to为string
<Link to="/about">关于</Link>

// to为obj
<Link to={{
 pathname: '/courses',
 search: '?sort=name',
 hash: '#the-hash',
 state: { fromDashboard: true }
}}/>

// replace 
<Link to="/courses" replace />

第三步 需要在container的render中去调用方法

<NavLink><Link> 的一个特定版本, 会在匹配上当前 URL
的时候会给已经渲染的元素添加样式参数,组件属性:

 <div>
 1111
 {renderRoutes(this.props.route.routes)}
</div>
  1. activeClassName(string):设置选中样式,默认值为 active;
  2. activeStyle(object):当元素被选中时, 为此元素添加样式;
  3. exact(bool):为 true 时, 只有当地址完全匹配 class 和 style
    才会应用;
  4. strict(bool):为 true 时,在确定位置是否与当前 URL
    匹配时,将考虑位置 pathname 后的斜线;
    isActive(func):判断链接是否激活的额外逻辑的功能;

这个优势是可以统一配置,劣势是需要在container中统一调用,但是这个抽出来统一实现,问题也不大,并且还可以解决
问题一。

从这里我们也可以看出,新版本的路由在组件化上面确实下了不少功夫,来看看NavLink的使用示例:

这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。

// activeClassName选中时样式为selected
<NavLink
 to="/faq"
 activeClassName="selected"
>FAQs</NavLink>

// 选中时样式为activeStyle的样式设置
<NavLink
 to="/faq"
 activeStyle={{
 fontWeight: 'bold',
 color: 'red'
 }}
>FAQs</NavLink>

// 当event id为奇数的时候,激活链接
const oddEvent = (match, location) => {
 if (!match) {
 return false
 }
 const eventID = parseInt(match.params.eventID)
 return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
 to="/events/123"
 isActive={oddEvent}
>Event 123</NavLink>

web前端 4

该组件用来渲染匹配地址的第一个 <Route> 或者 <Redirect>
。那么它与使用一堆route又有什么区别呢?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

<Switch>
的独特之处是独它仅仅渲染一个路由。相反地,每一个包含匹配地址(location)的
<Route> 都会被渲染。思考下面的代码:

您可能感兴趣的文章:

  • 详解react-router 4.0
    下服务器如何配合BrowserRouter
  • 详解升级react-router 4
    踩坑指南
  • react-router4
    嵌套路由的使用方法
  • React-router 4
    按需加载的实现方式及原理详解
  • React Router v4
    入坑指南(小结)
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的URL是 /about ,那么 <About> , <User> , 还有 <NoMatch>
都会被渲染,因为它们都与路径(path)匹配。这种设计,允许我们以多种方式将多个
<Route>
组合到我们的应用程序中,例如侧栏(sidebars),面包屑(breadcrumbs),bootstrap
tabs等等。 然而,偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于
/about ,我们也不希望匹配 /:user (或者显示我们的 “404” 页面
)。以下是使用 Switch 的方法来实现:

<Switch>
 <Route exact path="/" component={Home}/>
 <Route path="/about" component={About}/>
 <Route path="/:user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

现在,如果我们处于 /about<Switch> 将开始寻找匹配的 <Route>
<Route path="/about"/> 将被匹配, <Switch> 将停止寻找匹配并渲染
<About> 。同样,如果我们处于 /michael<User> 将被渲染。

以上就是我对React Router v4
的初试,反正也是一边查文档,一边试水的,如有错误或疏漏,还请大家谅解并不吝指正!也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 详解react-router 4.0
    下服务器如何配合BrowserRouter
  • 详解升级react-router 4
    踩坑指南
  • React-router v4
    路由配置方法小结
  • react-router4
    嵌套路由的使用方法
  • React-router 4
    按需加载的实现方式及原理详解

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有