我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React中react-redux和路由详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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>
<h1>app</h1>
{}
<Link to="/home">首页</Link>
<Link to="/list/17">列表页</Link>
<Link to="/detail/17">详情页</Link>
{}
<Switch>
{}
<Route path="/home" component={Home}></Route>
<Route path="/list/:page" component={List}></Route>
<Route path="/detail/:id" component={Detail}></Route>
{}
<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>
<h1>home</h1>
</div>
)
}
}
// 列表页
class List extends Component {
render() {
console.log('list', this)
return (
<div>
<h1>list</h1>
</div>
)
}
}
// 详情页
class Detail extends Component {
render() {
console.log('detail', this)
// 解构数据
let { history, match } = this.props;
return (
<div>
<h1>detail</h1>
<Demo history={history} match={match}></Demo>
</div>
)
}
}
// 详情页
class Demo extends Component {
render() {
console.log('demo', this)
return (
<div>
<h2>demo</h2>
</div>
)
}
}
// 第二步 确定渲染方式
let routes = (
<HashRouter>
<App></App>
</HashRouter>
)
// 第三步 渲染第二步结果
render(routes, app)

到此这篇关于React中react-redux和路由详解的文章就介绍到这了,更多相关React react-redux 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React中react-redux和路由详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

React从插槽、路由、redux的详细过程

React需要自己开发支持插槽功能,原理:父组件组件中写入的HTML,可以传入子组件的props中,这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下
2022-11-13

react redux及redux持久化示例详解

这篇文章主要为大家介绍了react redux及redux持久化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

react-redux的connect示例详解

connect()是react-redux中的核心方法之一,它将react组件预redux中的Store真正连接在一起,这篇文章主要介绍了react-redux的connect详解,需要的朋友可以参考下
2023-01-31

react-redux的connect用法详解

react-redux是react官方推出的redux绑定库,React-Redux将所有组件分成两大类一个是UI组件和容器组件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-01-31

React中的路由嵌套和手动实现路由跳转的方式详解

这篇文章主要介绍了React中的路由嵌套和手动实现路由跳转的方式,手动路由的跳转,主要是通过Link或者NavLink进行跳转的,实际上我们也可以通JavaScript代码进行跳转,需要的朋友可以参考下
2022-11-13

React Redux管理库示例详解

这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
2022-12-20

React中路由的参数传递路由的配置文件详解

路由的配置文件目前我们所有的路由定义都是直接使用Route组件,并且添加属性来完成的,路由的参数传递有二种方式这,两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用,本文通过示例代码详解讲解,需要的朋友参考下吧
2022-11-13

react-router-domV6嵌套路由实现详解

这篇文章主要为大家介绍了react-router-domV6嵌套路由实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-04

React使用redux基础操作详解

这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
2023-01-13

react-redux及redux状态管理工具使用详解

Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库(不是react插件库可以用在其他js框架中例如vue,但是基本用在react中),这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下
2023-01-31

React路由拦截模式及withRouter示例详解

这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

编程热搜

目录