redux在react中配合路由的使用(react-redux)

本文介绍了如何在React应用中结合Redux和路由进行数据管理与页面跳转。首先,强调了在使用route进行数据传递前要确保数据已存在。接着,列举了安装和配置Redux、index.js、app.js、Reducer.js、store.js以及各组件(Home、Address、Content)的代码示例,展示了如何在不同组件间利用Redux存储和获取数据,实现数据的跨组件传输和显示。

1.利用redux配合route可以进行数据跨组件的传输和显示数据

2.首先要安装route路由注意版本

注意:由于写的是死数据,一定要先传数据才能进行查看和显示

主要界面代码和包如下:

npm install react-router-dom@5

3.安装redux

npm install redux react-redux

4.index.js代码如下

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store/store';

import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    </Provider>
);

5.app.js代码如下


import { Redirect, Route, Switch } from 'react-router-dom';
import Address from './pages/Address/Ad
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值