關(guān)于React路由，我們?cè)趯W(xué)習(xí)之前先了解一下其他知識(shí)點(diǎn)：SPA應(yīng)用、路由的理解、react中如何使用路由。

SPA應(yīng)用的理解

我們知道React腳手架給我們構(gòu)建的是一個(gè)單頁(yè)應(yīng)用程序（SPA），在頁(yè)面加載時(shí)，只會(huì)加載一個(gè)HTML文件，然后使用JavaScript動(dòng)態(tài)地更新頁(yè)面內(nèi)容。這意味著您需要使用JavaScript來(lái)處理路由，以便在用戶導(dǎo)航時(shí)更新頁(yè)面內(nèi)容，而不是通過傳統(tǒng)的HTTP請(qǐng)求/響應(yīng)循環(huán)加載新頁(yè)面。

• SPA全稱：single page web application
• 整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面
• 點(diǎn)擊頁(yè)面中的路由鏈接不會(huì)刷新頁(yè)面，只會(huì)做頁(yè)面的局部更新
• 數(shù)據(jù)都需要通過ajax請(qǐng)求獲取, 并在前端異步展現(xiàn)

SPA的優(yōu)點(diǎn)包括：

- 更快的頁(yè)面加載速度，因?yàn)橹恍枰虞d一次HTML文件，之后只需要更新頁(yè)面內(nèi)容。
- 更好的用戶體驗(yàn)，因?yàn)轫?yè)面不會(huì)因?yàn)槊看螌?dǎo)航而重新加載。
- 更容易實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容，因?yàn)榭梢允褂?code>JavaScript來(lái)更新頁(yè)面內(nèi)容。

SPA的缺點(diǎn)包括：

- 對(duì)SEO不友好，因?yàn)樗阉饕嫱ǔＶ粫?huì)抓取初始HTML文件，而不會(huì)執(zhí)行JavaScript來(lái)抓取動(dòng)態(tài)內(nèi)容。
- 對(duì)于較大的應(yīng)用程序，可能會(huì)導(dǎo)致性能問題，因?yàn)樾枰虞d大量的JavaScript代碼。
- 對(duì)于不支持JavaScript的用戶，可能無(wú)法訪問應(yīng)用程序。

路由的理解

1、什么是路由？

簡(jiǎn)單的說一個(gè)路由就是一對(duì)映射關(guān)系 (key: value), key為路徑，value為function或者component

2、路由分類

1. 后端路由：

1. 理解： value是function, 用來(lái)處理客戶端提交的請(qǐng)求。
2. 注冊(cè)路由： router.get(path, function(req, res))
3. 工作過程：當(dāng)node接收到一個(gè)請(qǐng)求時(shí), 根據(jù)請(qǐng)求路徑找到匹配的路由, 調(diào)用路由中的函數(shù)來(lái)處理請(qǐng)求, 返回響應(yīng)數(shù)據(jù)

2. 前端路由：

1. 瀏覽器端路由，value是component，用于展示頁(yè)面內(nèi)容。
2. 注冊(cè)路由: <Route path="/test" component={Test}>
3. 工作過程：當(dāng)瀏覽器的path變?yōu)?code>/test時(shí), 當(dāng)前路由組件就會(huì)變?yōu)?code>Test組件

React中如何使用路由

為了在React應(yīng)用程序中實(shí)現(xiàn)路由，您可以使用React Router庫(kù)。

React Router庫(kù)通過使用瀏覽器的歷史記錄API來(lái)操作URL并根據(jù)當(dāng)前URL呈現(xiàn)適當(dāng)?shù)慕M件來(lái)工作。當(dāng)用戶單擊與定義的路由匹配的鏈接時(shí)，URL會(huì)更改并呈現(xiàn)相應(yīng)的組件。React Router庫(kù)提供了多種路由類型，包括BrowserRouter、HashRouter、MemoryRouter等。其中BrowserRouter使用HTML5的history API來(lái)實(shí)現(xiàn)路由，HashRouter使用URL的hash部分來(lái)實(shí)現(xiàn)路由，MemoryRouter則將路由信息存儲(chǔ)在內(nèi)存中。

在使用React Router時(shí)，您需要將路由器包裝在應(yīng)用程序的根組件中，并使用Route組件來(lái)定義每個(gè)路由。Route組件可以使用path屬性來(lái)定義路由的路徑，component屬性來(lái)指定路由匹配時(shí)要呈現(xiàn)的組件。Switch組件用于包裝Route組件，以確保只有一個(gè)路由匹配時(shí)才會(huì)呈現(xiàn)相應(yīng)的組件。如果您需要在路由之間傳遞參數(shù)，可以使用URL參數(shù)或查詢參數(shù)。URL參數(shù)是在路徑中定義的參數(shù)，例如/users/:id，其中:id是一個(gè)參數(shù)。查詢參數(shù)是在URL中以?開頭的鍵值對(duì)，例如/users?id=123。您可以使用React Router提供的useParams和useLocation鉤子來(lái)訪問這些參數(shù)。

編寫案例

步驟一：安裝React官方維護(hù)的路由依賴庫(kù)

npm i react-router-dom --save

步驟二：編寫組件Home

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return <h2>我是Home的內(nèi)容</h2>
  }
}

步驟三：編寫組件About

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return <h2>我是About的內(nèi)容</h2>
  }
}

步驟四：編寫組件App

import React, { Component } from 'react'
import Home from './components/Home'
import About from './components/About'
import {Link,Route} from 'react-router-dom'

export default class App extends Component {
  render() {
    return (
      <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-2 col-xs-offset-2">
        <div className="list-group">
          {/* <a className="list-group-item" href="./about.html">About</a>
          <a className="list-group-item active" href="./home.html">Home</a> */}
          <Link className='list-group-item' to='/home'>Home</Link>
          <Link className='list-group-item' to='/about'>About</Link>
          
        </div>
      </div>
      <div className="col-xs-6">
        <div className="panel">
          <div className="panel-body">
            <Route path="/home"component={Home} />
            <Route path="/about"component={About} />
          </div>
        </div>
      </div>
    </div>
  </div>
    )
  }
}

其中關(guān)鍵代碼有三個(gè)部分：

關(guān)鍵代碼1：

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

關(guān)鍵代碼2：

<Link className='list-group-item' to='/home'>Home</Link>
<Link className='list-group-item' to='/about'>About</Link>

在React中靠路由鏈接通過組件Link實(shí)現(xiàn)切換組件–編寫路由鏈接

關(guān)鍵代碼3：

<Route path="/home"component={Home} />
<Route path="/about"component={About} />

通過組件Route實(shí)現(xiàn)路由注冊(cè)

步驟五：編寫入口文件index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

這里的App組件被BrowserRouter包裹, 使得整個(gè)應(yīng)用共用一個(gè)路由器。

查看效果：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-436740.html

總結(jié)

• 明確好界面中的導(dǎo)航區(qū)、展示區(qū)
• 導(dǎo)航區(qū)的a標(biāo)簽改為Link標(biāo)簽：<link to="/xxxx">Demo</Link>
• 展示區(qū)寫Route標(biāo)簽進(jìn)行路徑的匹配：<Route path='/xxxx' component={Demo}/>
• <App/>的最外側(cè)包裹一個(gè)<BrowserRouter>或者<HashRouter>

到了這里，關(guān)于第三十章 React的路由基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！