一、前端路由和后端路由

1)后端路由

多頁應(yīng)用中，一個URL對應(yīng)一個HTML頁面，一個Web應(yīng)用包含很多HTML頁面，在多頁應(yīng)用中，頁面路由控制由服務(wù)器端負(fù)責(zé)，這種路由方式稱為后端路由。

多頁應(yīng)用中,每次頁面切換都需要向服務(wù)器發(fā)送一次請求，頁面使用到的靜態(tài)資源也需要重新加載，存在一定的浪費(fèi)。而且，頁面的整體刷新對用戶體驗(yàn)也有影響，因?yàn)椴煌撁骈g往往存在共同的部分，例如導(dǎo)航欄、側(cè)邊欄等，頁面整體刷新也會導(dǎo)致共用部分的刷新。

2)前端路由

在單面應(yīng)用中，URL發(fā)生并不會向服務(wù)器發(fā)送新的請求，所以“邏輯頁面”的路由只能由前端負(fù)責(zé)，這種路由方式稱為前端路由。

目前，國內(nèi)的搜索引擎大多對單頁應(yīng)用的SEO支持的不好，因此，對于 SEO 非?？粗氐?Web
應(yīng)用(例如，企業(yè)官方網(wǎng)站，電商網(wǎng)站等)，一般還是會選擇采用多頁面應(yīng)用。React 也并非只能用于開發(fā)單頁面應(yīng)用。

二、React Router 安裝

這里使用的 React Router 的大版本號是 v4, 這也是目前最新版本。

React Router 包含3個庫, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能，實(shí)際使用，我們不會直接安裝 react-router,而是根據(jù)應(yīng)用運(yùn)行的環(huán)境選擇安裝 react-router-dom(在瀏覽器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依賴 react-router,所以在安裝時， react-router 也會自動安裝。

創(chuàng)建 Web應(yīng)用，使用

npm install react-router-dom

創(chuàng)建 navtive 應(yīng)用，使用

 npm install react-router-native

三、路由器

React Router 通過 Router 和 Route 兩個組件完成路由功能。Router 可以理解成路由器，一個應(yīng)用中需要一個 Router 實(shí)例，所有跌幅配置組件 Route 都定義為 Router 的子組件。在 Web應(yīng)用中，我們一般會使用對 Router 進(jìn)行包裝的 BrowserRouter 或 HashRouter 兩個組件 BrowserRouter使用 HTML5 的 history API（pushState、replaceState等）實(shí)現(xiàn)應(yīng)用的 UI 和 URL 的同步。HashRouter 使用 URL 的 hash 實(shí)現(xiàn)應(yīng)用的 UI 和 URL 同步。

BrowserRouter 創(chuàng)建的 URL 形式如下：http://example.com/some/path

HashRouter 創(chuàng)建的 URL 形式如下： http://example.com/#/some/path

使用 BrowserRouter 時，一般還需要對服務(wù)器進(jìn)行配置，讓服務(wù)器能正確地處理所有可能的URL。例如，當(dāng)瀏覽器發(fā)生 http://example.com/some/path 和 http://example.com/some/path2 兩個請求時，服務(wù)器需要能返回正確的 HTML 頁面（也就是單頁面應(yīng)用中唯一的 HTML 頁面）

HashRouter 則不存在這個問題，因?yàn)?hash 部分的內(nèi)容會被服務(wù)器自動忽略，真正有效的信息是 hash 前端的部分，而對于單頁應(yīng)用來說，這部分是固定的。

Router 會創(chuàng)建一個 history 對象，history 用來跟蹤 URL, 當(dāng)URL 發(fā)生變化時， Router,的后代組件會重新渲染。React Router 中提供的其他組件可以通過 context 獲取 history 對象，這也隱含說明了 React Router 中其他組件必須作為 Router 組件后代使用。但 Router 中只能唯一的一個子元素，例如：

// 正確
ReactDOM.render(
 (
 <BrowserRouter>
  <App />
 </BrowserRouter>),
 document.getElementById('root')
)
//錯誤，Router 中包含兩個子元素
ReactDOM.render(
 (
  <BrowserRouter>
   <App1 />
   <App2 />
  </BrowserRouter>),
 document.getElementById('root')
)

四、路由器

Route 是 React Router中用于配置路由信息的組件，也是 React Router 中使用頻率最高的組件。每當(dāng)有一個組件需要根據(jù) URL 決定是否渲染時，就需要創(chuàng)建一個 Route。

1) path

每個 Route 都需要定義一個 path 屬性，當(dāng)使用 BrowserRouter 時，path 用來描述這個Router匹配的 URL 的pathname;當(dāng)使用 HashRouter時，path 用來描述這個 Route 匹配的 URL 的 hash。例如，使用 BrowserRouter 時，<Route path=''foo' /> 會匹配一個 pathname 以 foo 開始的 URL （如: http://example.com/foo）。當(dāng) URL 匹配一個 Route 時，這個 Route 中定義的組件就會被渲染出來。

2)match

當(dāng) URL 和 Route匹配時，Route 會創(chuàng)建一個 match 對象作為 props 中的一個 屬性傳遞給被渲染的組件。這個對象包含以下4個屬性。

（1）params: Route的 path 可以包含參數(shù)，例如 <Route path="/foo/:id" 包含一個參數(shù) id。params就是用于從匹配的 URL 中解析出 path 中的參數(shù)，例如，當(dāng) URL = 'http://example.ocm/foo/1' 時，params= {id: 1}。

（2）isExact: 是一個布爾值，當(dāng) URL 完全匹時，值為 true; 當(dāng) URL 部分匹配時，值為 false.例如，當(dāng) path='/foo'、URL="http://example.com/foo" 時，是完全匹配; 當(dāng) URL="http://example.com/foo/1" 時，是部分匹配。

（3）path: Route 的 path 屬性，構(gòu)建嵌套路由時會使用到。

（4）url: URL 的匹配的方式

3)Route 渲染組件的方式

（1）component

component 的值是一個組件，當(dāng) URL 和 Route 匹配時，Component屬性定義的組件就會被渲染。例如：

<Route path='/foo' component={Foo} >

當(dāng) URL = "http://example.com/foo" 時，F(xiàn)oo組件會被渲染。

(2) render

render 的值是一個函數(shù)，這個函數(shù)返回一個 React 元素。這種方式方便地為待渲染的組件傳遞額外的屬性。例如：

<Route path='/foo' render={(props) => {
 <Foo {...props} data={extraProps} />
}}>
</Route>

Foo 組件接收了一個額外的 data 屬性。

（3）children

children 的值也是一個函數(shù)，函數(shù)返回要渲染的 React 元素。 與前兩種方式不同之處是，無論是否匹配成功， children 返回的組件都會被渲染。但是，當(dāng)匹配不成功時，match 屬性為 null。例如:

<Route path='/foo' render={(props) => {
 <div className={props.match ? 'active': ''}>
  <Foo {...props} data={extraProps} />
 </div>
}}>
</Route> 

  如果 Route 匹配當(dāng)前 URL，待渲染元素的根節(jié)點(diǎn) div 的 class 將設(shè)置成 active.

4）Switch 和 exact

當(dāng)URL 和多個 Route 匹配時，這些 Route 都會執(zhí)行渲染操作。如果只想讓第一個匹配的 Route 沉浸，那么可以把這些 Route 包到一個 Switch 組件中。如果想讓 URL 和 Route 完全匹配時，Route才渲染，那么可以使用 Route 的 exact 屬性。Switch 和 exact 常常聯(lián)合使用，用于應(yīng)用首頁的導(dǎo)航。例如：

<Router>
 <Switch>
  <Route exact path='/' component={Home}/>
  <Route exact path='/posts' component={Posts} />
  <Route exact path='/:user' component={User} />
 </Switch>
</Router>

如果不使用 Switch,當(dāng) URL 的 pathname 為 "/posts" 時，<Route path='/posts' /> 和 <Route path=':user' /> 都會被匹配，但顯然我們并不希望 <Route path=':user' /> 被匹配，實(shí)際上也沒有用戶名為 posts 的用戶。如果不使用 exact， "/" "/posts" "/user1"等幾乎所有 URL 都會匹配第一個 Route,又因?yàn)镾witch 的存在，后面的兩個 Route永遠(yuǎn)不會被匹配。使用 exact,保證 只有當(dāng) URL 的 pathname 為 '/'時，第一個Route才會匹配。

5）嵌套路由

嵌套路由是指在Route 渲染的組件內(nèi)部定義新的 Route。例如，在上一個例子中，在 Posts 組件內(nèi)再定義兩個 Route:

const Posts = ({match}) => {
 return (
  <div>
   {/* 這里 match.url 等于 /posts */}
   <Route path={`${match.url}/:id`} component={PostDetail} />
   <Route exact path={match.url} component={PostList} />
  </div>
 )
}

五、鏈接

Link 是 React Router提供的鏈接組件，一個 Link 組件定義了當(dāng)點(diǎn)擊該 Link 時，頁面應(yīng)該如何路由。例如：

const Navigation = () => {
 <header>
  <nav>
   <ul>
    <li><Link to='/'>Home</Link></li>
    <li><Link to='/posts'>Posts</Link></li>
   </ul>
  </nav>
 </header>
}  

Link 使用 to 屬性聲明要導(dǎo)航到的URL地址。to 可以是 string 或 object 類型，當(dāng) to 為 object 類型時，可以包含 pathname、search、hash、state 四個屬性，例如:

<Link to={{
 pathname: '/posts',
 search: '?sort=name',
 hash:'#the-hash',
 state: { fromHome: true}
}}>
</Link>

除了使用Link外，我們還可以使用 history 對象手動實(shí)現(xiàn)導(dǎo)航。history 中最常用的兩個方法是 push(path,[state]) 和 replace(path,[state]),push會向?yàn)g覽器記錄中新增一條記錄，replace 會用新記錄替換記錄。例如：

history.push('/posts');
history.replace('/posts');

六、路由設(shè)計(jì)

路由設(shè)計(jì)的過程可以分為兩步：

1. 為每一個頁面定義有語義的路由名稱(path)
2. 組織 Route 結(jié)構(gòu)層次

1）定義路由名稱

我們有三個頁面，按照頁面功能不難定義出如下的路由名稱：

• 登錄頁： /login
• 帖子列表頁: /posts
• 帖子詳情頁: /posts/:id(id代表帖子的ID)

但是這些還不夠，還需要考慮打開應(yīng)用時的默認(rèn)頁面，也就是根路徑"/"對應(yīng)的頁面。結(jié)合業(yè)務(wù)場景，帖子列表作為應(yīng)用的默認(rèn)頁面為合適，因此，帖子列表對應(yīng)兩個路由名稱: '/posts'和 '/'

2）組織 Route 結(jié)構(gòu)層次

React Router 4并不需要在一個地方集中聲明應(yīng)用需要的所有 Route, Route實(shí)際上也是一個普通的 React 組件，可以在任意地方使用它（前提是，Route必須是 Router 的子節(jié)點(diǎn)）。當(dāng)然，這樣的靈活性也一定程度上增加了組織 Route 結(jié)構(gòu)層次的難度。

我們先考慮第一層級的路由。登錄頁和帖子列表頁(首頁)應(yīng)該屬于第一層級：

<Router>
 <Switch>
  <Route exact path="/" component={Home}></Route>
  <Route exact path="/login" component={Login}></Route>
  <Route exact path="/posts" component={Home}></Route>
 </Switch>
</Router>

第一個Route 使用了 exact 屬性，保證只有當(dāng)訪問根路徑時，第一個 Route 才會匹配成功。Home 是首頁對應(yīng)組件，可以通過 "/posts" 和 “/” 兩個路徑訪問首頁。注意，這里并沒有直接渲染帖子列表組件，真正渲染帖子列表組件的地方在 Home 組件內(nèi)，通過第二層級的路由處理帖子列表組件和帖子詳情組件渲染，components/Home.js 的主要代碼如下：

class Home extends Component {
 /**省略其余代碼 */
 render() {
  const {match, location } = this.props;
  const { username } = this.state;
  return(
   <div>
    <Header
     username = {username}
     onLogout={this.handleLogout}
     location = {location}
    >
    </Header>
    {/* 帖子列表路由配置 */}
    <Route
     path = {match.url}
     exact
     render={props => <PostList username={username} {...this.props}></PostList>}
    ></Route>
   </div>
  )
 }
}

Home的render內(nèi)定義了兩個 Route,分別用于渲染帖子列表和帖子詳情。PostList 是帖子列表組件，Post是帖子詳情組件，代碼使用Router 的render屬性渲染這兩個組件，因?yàn)樗鼈冃枰邮疹~外的 username 屬性。另外，無論訪問是帖子列表頁面還是帖子詳情頁面，都會共用相同 Header 組件。

七、代碼分片

默認(rèn)情況下，當(dāng)在項(xiàng)目根路徑下執(zhí)行 npm run build 時 ,create-react-app內(nèi)部使用 webpack將 src路徑下的所有代碼打包成一個 JS 文件和一個 Css 文件。

當(dāng)項(xiàng)目代碼量不多時，把所有代碼打包到一個文件的做法并不會有什么影響。但是，對于一個大型應(yīng)用，如果還把所有的代碼都打包到一個文件中，顯然就不合適了。

create-react-app 支持通過動態(tài) import() 的方式實(shí)現(xiàn)代碼分片。import()接收一個模塊的路徑作為參數(shù)，然后返回一個 Promise 對象， Promise 對象的值就是待導(dǎo)入的模塊對象。例如

// moduleA.js

const moduleA = 'Hello'
export { moduleA };

// App.js

import React, { Component } from 'react';

class App extends Component {
 handleClick = () => {
  // 使用import 動態(tài)導(dǎo)入 moduleA.js
  import('./moduleA')
   .then(({moduleA}) => {
    // 使用moduleA
   })
   .catch(err=> {
    //處理錯誤
   })
 };
 render() {
  return(
   <div>
    <button onClick={this.handleClick}>加載 moduleA</button>
   </div>
  )
 }
}

export default App;

上面代碼會將 moduleA.js 和它所有依賴的其他模塊單獨(dú)打包到一個chunk文件中，只有當(dāng)用戶點(diǎn)擊加載按鈕，才開始加載這個 chunk 文件。

當(dāng)項(xiàng)目中使用 React Router 是，一般會根據(jù)路由信息將項(xiàng)目代碼分片，每個路由依賴的代碼單獨(dú)打包成一個chunk文件。我們創(chuàng)建一個函數(shù)統(tǒng)一處理這個邏輯：

import React, { Component } from 'react';
// importComponent 是使用 import()的函數(shù)
export default function asyncComponent(importComponent) {
 class AsyncComponent extends Component {
  constructor(props) {
   super(props);
   this.state = {
    component: null //動態(tài)加載的組件
   }
  }
  componentDidMount() {
   importComponent().then((mod) => {
    this.setState({
     // 同時兼容 ES6 和 CommonJS 的模塊
     component: mod.default ? mod.default : mod;
    });
   })
  }
  render() {
   // 渲染動態(tài)加載組件
   const C = this.state.component;
   return C ? <C {...this.props}></C> : null
  }
 }

 return AsyncComponent;
} 

asyncComponent接收一個函數(shù)參數(shù) importComponent, importComponent 內(nèi)通過import()語法動態(tài)導(dǎo)入模塊。在AsyncComponent被掛載后，importComponent就會陰調(diào)用，進(jìn)而觸發(fā)動態(tài)導(dǎo)入模塊的動作。

下面利用 asyncComponent 對上面的例子進(jìn)行改造，代碼如下:

import React, { Component } from 'react';
import { ReactDOM, BrowserRouter as Router, Switch, Route } from 'react-dom';
import asyncComponent from './asyncComponent'
//通過asyncComponent 導(dǎo)入組件，創(chuàng)建代碼分片點(diǎn)
const AsyncHome = asyncComponent(() => import("./components/Home"))
const AsyncLogin = asyncComponent(() => import("./components/Login"))

class App extends component {
 render() {
  return(
   <Router>
    <Switch>
     <Route exact path="/" component={AsyncHome}></Route>
     <Route exact path="/login" component={AsyncLogin}></Route>
     <Route exact path="/posts" component={AsyncHome}></Route>
    </Switch>
   </Router>
  )
 }
}

export default App;

這樣，只有當(dāng)路由匹配時，對應(yīng)的組件才會被導(dǎo)入，實(shí)現(xiàn)按需加載的效果。

這里還有一個需要注意的地方，打包后沒有單獨(dú)的CSS文件了。這是因?yàn)?CSS樣子被打包到各個 chunk 文件中，當(dāng) chunk文件被加載執(zhí)行時，會有動態(tài)把 CSS 樣式插入頁面中。如果希望把 chunk 中的 css打包到一個單獨(dú)的文件中，就需要修改 webpack 使用的 ExtractTextPlugin 插件的配置，但 create-react-app 并沒有直接把 webpack 的配置文件暴露給用戶，為了修改相應(yīng)配置
，需要將 create-react-app 管理的配置文件“彈射”出來，在項(xiàng)目根路徑下執(zhí)行：

npm run eject

項(xiàng)目中會多出兩個文件夾：config和 scripts,scrips中包含項(xiàng)目啟動、編譯和測試的腳本，config 中包含項(xiàng)目使用的配置文件，webpack配置文件 就在這個路徑下，打包 webpack.config.prod.js 找到配置 ExtractTextPlugin 的地方，添加 allChunks:true 這項(xiàng)配置：

new ExtractTextPlugin({
 filename: cssFilename,
 allChunks: true
})

然后重新編譯項(xiàng)目，各個chunk 文件 使用的 CSS 樣式 又會統(tǒng)一打包到 main.css 中。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。