React中react-redux和路由怎么應用

這篇文章主要介紹了React中react-redux和路由怎么應用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React中react-redux和路由怎么應用文章都會有所收獲，下面我們一起來看看吧。

觀察者模式解決組件間通信問題

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

• 在一個組件中，訂閱消息

• 在另一個組件中，發布消息

發布消息之后，訂閱的消息回調函數會執行，在函數中，我們修改狀態，這樣就可以實現組件間通信了。這就是reflux框架的實現。

react-redux

redux早期被設計成可以在各個框架中使用，因此在不同的框架中使用的時候，要引入相應的插件

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

npm install react-redex

react-redux提供了一個方法和一個組件:

connect方法

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

connect方法有兩個參數，都是函數

第一個參數表示如何為組件的屬性拓展store中的state數據

參數是state

返回值是對象，就是為屬性拓展的數據

第二個參數表示如何為組件的屬性拓展store中的dispatch方法

參數就是dispatch

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

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

參數是組件

返回值是新組件，這個新的組件就擁有了state數據和dispatch方法了

Provider組件

用來為應用程序提供store對象的組件

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

Provider組件中我們可以渲染應用程序組件

在應用程序中，這些被connect方法處理的組件就會接收store中的數據了

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

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

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

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

路由

從14版本開始，react路由為了實現react多端適配的理想，將react路由拆分成不同類型的。

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

我們開發web端，要安裝react-router-dom路由

npm install react-router-dom

使用路由

使用路由分成三步：

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

• 可以通過Swtich組件定義

• 可以通過Route組件定義每一條路由規則

• path 定義路由規則

• component定義路由渲染的組件

• name 定義路由的名稱

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

常用的有兩種:

• BrowserRouter：基于path，實現的路由規則，需要服務器端的配合

• HashRouter：基于hash，實現的路由規則，不需要服務器端配合

• 我們通過路由渲染模式組件，渲染應用程序

• 將應用程序組件，定義在該組件內

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

默認路由

在react路由中，讓path匹配*，即可定義默認路由

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

路由重定向

我們通過Redirect組件定義重定向路由

from定義匹配的規則

to定義重定向的規則

獲取路由參數

在react中，我們使用路由的組件，會自動拓展一些屬性

history表示對全局的history歷史對象的模擬

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

match表示路由數據對象（解析后的數據，因此工作中常用）

其他沒有通過路由渲染的組件是不具備這些信息，想具有這些信息，我們可以通過組件間通信的技術，依次傳遞這些數據信息

路由導航

我們通過Link組件定義路由導航

通過to屬性定義導航地址，即使是hash路由也不要加#

默認渲染成a標簽

舉例：

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

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