React中react-redux和路由怎么應(yīng)用

這篇文章主要介紹了React中react-redux和路由怎么應(yīng)用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇React中react-redux和路由怎么應(yīng)用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

觀察者模式解決組件間通信問(wèn)題

使用觀察者解決組件間通信，分成兩步

• 在一個(gè)組件中，訂閱消息

• 在另一個(gè)組件中，發(fā)布消息

發(fā)布消息之后，訂閱的消息回調(diào)函數(shù)會(huì)執(zhí)行，在函數(shù)中，我們修改狀態(tài)，這樣就可以實(shí)現(xiàn)組件間通信了。這就是reflux框架的實(shí)現(xiàn)。

react-redux

redux早期被設(shè)計(jì)成可以在各個(gè)框架中使用，因此在不同的框架中使用的時(shí)候，要引入相應(yīng)的插件

在react中使用要引入react-redux，因此我們要安裝這個(gè)模塊

npm install react-redex

react-redux提供了一個(gè)方法和一個(gè)組件:

connect方法

為組件的屬性拓展store中的信息（state，dispatch）的方法

connect方法有兩個(gè)參數(shù)，都是函數(shù)

第一個(gè)參數(shù)表示如何為組件的屬性拓展store中的state數(shù)據(jù)

參數(shù)是state

返回值是對(duì)象，就是為屬性拓展的數(shù)據(jù)

第二個(gè)參數(shù)表示如何為組件的屬性拓展store中的dispatch方法

參數(shù)就是dispatch

返回值是對(duì)象，就是為屬性拓展的方法

connect方法的返回值是一個(gè)新方法，就是為組件拓展的方法。

參數(shù)是組件

返回值是新組件，這個(gè)新的組件就擁有了state數(shù)據(jù)和dispatch方法了

Provider組件

用來(lái)為應(yīng)用程序提供store對(duì)象的組件

store屬性，就是綁定添加的store

Provider組件中我們可以渲染應(yīng)用程序組件

在應(yīng)用程序中，這些被connect方法處理的組件就會(huì)接收store中的數(shù)據(jù)了

注意：只有通過(guò)connect的處理方法處理之后的組件具有state和dispatch，其他的組件沒(méi)有這些信息

想讓其它組件具有store中的state和dispatch，有兩種途徑：

• 第一種，具有state數(shù)據(jù)和dispatch方法的組件中，向子組件傳遞（最常用）

• 第二種，再用處理方法，處理其他的組件。

路由

從14版本開(kāi)始，react路由為了實(shí)現(xiàn)react多端適配的理想，將react路由拆分成不同類型的。

例如在web端要使用web端路由，在native端要使用nativate路由等等

我們開(kāi)發(fā)web端，要安裝react-router-dom路由

npm install react-router-dom

使用路由

使用路由分成三步：

第一步 定義路由渲染容器元素（渲染位置）

• 可以通過(guò)Swtich組件定義

• 可以通過(guò)Route組件定義每一條路由規(guī)則

• path 定義路由規(guī)則

• component定義路由渲染的組件

• name 定義路由的名稱

第二步 定義路由的渲染方式（規(guī)則）

常用的有兩種:

• BrowserRouter：基于path，實(shí)現(xiàn)的路由規(guī)則，需要服務(wù)器端的配合

• HashRouter：基于hash，實(shí)現(xiàn)的路由規(guī)則，不需要服務(wù)器端配合

• 我們通過(guò)路由渲染模式組件，渲染應(yīng)用程序

• 將應(yīng)用程序組件，定義在該組件內(nèi)

第三步 用render方法，渲染第二步得到的結(jié)果

默認(rèn)路由

在react路由中，讓path匹配*，即可定義默認(rèn)路由

由于*匹配的非常廣，因此我們常常把它配置在最后面

路由重定向

我們通過(guò)Redirect組件定義重定向路由

from定義匹配的規(guī)則

to定義重定向的規(guī)則

獲取路由參數(shù)

在react中，我們使用路由的組件，會(huì)自動(dòng)拓展一些屬性

history表示對(duì)全局的history歷史對(duì)象的模擬

location表示對(duì)全局的location對(duì)象的模塊，但是只是處理路由這一部分

match表示路由數(shù)據(jù)對(duì)象（解析后的數(shù)據(jù)，因此工作中常用）

其他沒(méi)有通過(guò)路由渲染的組件是不具備這些信息，想具有這些信息，我們可以通過(guò)組件間通信的技術(shù)，依次傳遞這些數(shù)據(jù)信息

路由導(dǎo)航

我們通過(guò)Link組件定義路由導(dǎo)航

通過(guò)to屬性定義導(dǎo)航地址，即使是hash路由也不要加#

默認(rèn)渲染成a標(biāo)簽

舉例：

// 引入路由
import { Switch, Route, HashRouter, Redirect, Link } from 'react-router-dom';
// 應(yīng)用程序
class App extends Component {
render() {
console.log('app', this)
return (
<div>
<h2>app</h2>
{/*導(dǎo)航*/}
<Link to="/home">首頁(yè)</Link>
<Link to="/list/17">列表頁(yè)</Link>
<Link to="/detail/17">詳情頁(yè)</Link>
{/*第一步 定義路由渲染位置*/}
<Switch>
{/*Route定義規(guī)則*/}
<Route path="/home" component={Home}></Route>
<Route path="/list/:page" component={List}></Route>
<Route path="/detail/:id" component={Detail}></Route>
{/*輸入ickt進(jìn)入detail/ickt詳情頁(yè)*/}
<Redirect from="/ickt" to="/detail/ickt"></Redirect>
{/*默認(rèn)路由*/}
<Route path="*" component={Home}></Route>
</Switch>
</div>
)
}
}
// 首頁(yè)
class Home extends Component {
render() {
console.log('home', this)
return (
<div>
<h2>home</h2>
</div>
)
}
}
// 列表頁(yè)
class List extends Component {
render() {
console.log('list', this)
return (
<div>
<h2>list</h2>
</div>
)
}
}
// 詳情頁(yè)
class Detail extends Component {
render() {
console.log('detail', this)
// 解構(gòu)數(shù)據(jù)
let { history, match } = this.props;
return (
<div>
<h2>detail</h2>
<Demo history={history} match={match}></Demo>
</div>
)
}
}
// 詳情頁(yè)
class Demo extends Component {
render() {
console.log('demo', this)
return (
<div>
<h3>demo</h3>
</div>
)
}
}
// 第二步 確定渲染方式
let routes = (
<HashRouter>
<App></App>
</HashRouter>
)
// 第三步 渲染第二步結(jié)果
render(routes, app)

關(guān)于“React中react-redux和路由怎么應(yīng)用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“React中react-redux和路由怎么應(yīng)用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。