React Router5 感性认知

最新推荐文章于 2024-12-31 21:13:57 发布

原创最新推荐文章于 2024-12-31 21:13:57 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

探讨React Router从v3到v4、v5的演变，包括理念转变、组件化改进及灵活性增强，如BrowserRouter、Switch组件的应用，以及非集中式路由的实现。

本文主要是了解下 react-router 新版本一些理念，为我们以后的开发注入一些感性认知。

react router 目前最新的版本是v5.1.2。

此版本没有重大更改。如果已经在使用4.x版本，则可以在零代码更改的情况下立即使用版本5。v5中最显着的改进是对React 16的全面支持，同时保持了与React> = 15的完全兼容性。
@Michael Jackson - react router 主要作者

从v4开始，相较于之前的版本有很大的变化，react 彻底将“Just Component ” 一切皆组件的理念贯彻到底，所以开发方式也发生了极大的变化，从思维上要有所转换。

可能你已经用惯了v3的开发方式，一时难以转变，但是任何新事物的诞生必然有他的理由，当我用过 v5之后，不得不说真的很方便,变得更简单，更灵活。

下面简单的说下从 v4 开始的一些重大的改进

分包

v4 之前只有一个库 react-router。

从 v4开始分为了两个库

react-router 核心库
react-router-dom 用来操作 DOM

当然还有react-router-native

这可以理解成在架构上做了一些调整，通用的和平台无关的能力放在一个库，和平台耦的相关能力放在了一个库，这和我们平时的开发中代码优化差不多。

react最开始也只有一个库。后来拆分开来 react 和 react-dom 还有react-native。

所以在使用的时候只需要安装react-router-dom即可，核心库属于依赖库，会自动安装。

一切皆组件 - 思维模式的转变

既然一切都是组件，那么我们可以按照以往写组件的方式来使用路由，也可以把路由和其他组件写在一起，可以当做 UI 组件的一部分来进行渲染。

升级之后的 Route、Link、Switch、BrowerRouter、HashRouter等都是一个普通的组件。

//v3
<Router history={browserHistory}></Router>
//v4
<BrowerRouter></BrowerRouter>
//v4  新增 Switch 组件
<Switch><Route></Route></Switch>

非集中式路由 - 更灵活

v4之前版本我们只能将路由规则集中写在一起，无法和其他的组件写在一起，更像是api的组合。

看下 v3的写法

import { Router, Route, IndexRoute } from 'react-router'

const Layout = props => (
  <div className="Layout-box">
    <header>
      React Router 3 App
    </header>
    <main>
      {props.children}
    </main>
  </div>
)

const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>

const App = () => (
  <Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={HomePage} />
      <Route path="/users" component={UsersPage} />
    </Route>
  </Router>
)

render(<App />, document.getElementById('root'))

上面就是v3的一种集中式路由，布局和页面组件是独立的，所有组件都只是路由的一个参数。

React Router 4 开始不再主张集中式路由了（当然可以继续使用），路由规则可以写在布局和 UI 组件之间。

以下是 v4 中的写法：

import { BrowserRouter, Route } from 'react-router-dom'

const Layout = () => (
  <div className="layout-box">
    <header>
     React Router 4 App
    </header>
    <main>
      <Route path="/" exact component={HomePage} />
      <Route path="/users" component={UsersPage} />
    </main>
  </div>
)

const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>

const App = () => (
  <BrowserRouter>
    <Layout />
  </BrowserRouter>
)

render(<App />, document.getElementById('root'))

v4的写法其实更符合组件式开发的理念，路由组件可以更灵活的被使用。