React Router5 感性认知

原创

wx61f365eb1f9fc 2022-02-28 15:10:51 ©著作权

©著作权归作者所有：来自51CTO博客作者wx61f365eb1f9fc的原创作品，请联系作者获取转载授权，否则将追究法律责任

React Router5 感性认知_静态路由

本文主要是了解下 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即可，核心库属于依赖库，会自动安装。

React Router5 感性认知_规则集_02

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

既然一切都是组件，那么我们可以按照以往写组件的方式来使用路由，也可以把路由和其他组件写在一起，可以当做 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'))