9 redux 搭配 React Router

秒速五厘米 2023-02-27 15:59 20阅读 0赞

## **安装 React Router** ##

可以使用 npm 来安装 React Router。本教程基于 react-router@^2.7.0 。

npm install --save react-router

## **连接 React Router 和 Redux 应用** ##

首先，我们需要从 React Router 中导入 <Router /> 和 <Route />。代码如下：

import \{  Router, Route, browserHistory \} from 'react-router';

const Root = () => (

<Router>

<Route path="/" component=\{ App\} />

</Router>  );

然后，我们从 React Redux 导入 <Provider />，用 <Provider /> 包裹 <Router />

import \{  Provider \} from 'react-redux';

const Root = (\{  store \}) => (

<Provider store=\{ store\}>

<Router>

<Route path="/" component=\{ App\} />

</Router>

</Provider>);

完整代码如下：

import React, \{  PropTypes \} from 'react';

import \{  Provider \} from 'react-redux';

import \{  Router, Route, browserHistory \} from 'react-router';

import App from './App';

const Root = (\{  store \}) => (

<Provider store=\{ store\}>

<Router history=\{ browserHistory\}>

<Route path="/(:filter)" component=\{ App\} />

</Router>

</Provider>);

Root.propTypes = \{

store: PropTypes.object.isRequired,

\};

export default Root;

# #

## **读取 URL 中的数据** ##

在React组件中读取url数据：

没什么变化，直接按照react router原本的方式读取

在mapStateToProps 中读取url数据：

React Redux的mapStateToProps 的第二可选参数 ownProps，这是原本传递给组件的props属性对象，在ownProps中就包含了react router的数据

const mapStateToProps = (state, ownProps) => \{

return \{

todos: getVisibleTodos(state.todos, ownProps.match.params.filter)

\};

\};

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关基于 React、Redux、Webpack 和 React-Router 的轻量级前端框架。

基于 [React][] 、 [Redux][] 、 [Webpack][] 和 [React-Router][] 的轻量级前端框架。特性快速上手，没有其它

痛定思痛。/ 2023年07月05日 13:06/ 0 赞/ 138 阅读

相关 9 redux 搭配 React Router

安装 React Router 可以使用 npm 来安装 React Router。本教程基于 react-router@^2.7.0 。 npm install --

秒速五厘米/ 2023年02月27日 15:59/ 0 赞/ 21 阅读

相关 6 redux 搭配 React

安装 React Redux Redux 默认并不包含 [React 绑定库][React]，需要单独安装。 npm install --save react-redu

╰+哭是因爲堅強的太久メ/ 2023年02月27日 15:57/ 0 赞/ 15 阅读

相关 react-router+redux实际操作

react-router学习网站：[https://reactrouter.com/web/example/custom-link][https_reactrouter.com

红太狼/ 2022年12月17日 07:14/ 0 赞/ 297 阅读

相关小悟：react + redux + react-router+ ES6/7 + webpack 技术栈

运营后台服务器架构 2017-03-01 连鹏飞服务端经过测试，服务端开发语言不影响打包好的项目运行，只需要将打包好的项目丢进启动的服务器即可。

女爷i/ 2022年07月13日 19:17/ 0 赞/ 180 阅读

相关 React-router（9）重定向

9、重定向 [DEMO地址][DEMO] > 参考 7.redirect.js 重定向有两种方式，第一种是通过 `<Redirect>` 标签实现，第二种是通过编程式

待我称王封你为后i/ 2022年05月30日 04:11/ 0 赞/ 229 阅读

相关 react redux

在react中使用redux入门。基本的例子使用redux管理react的状态。 <!DOCTYPE html> <html> <head>

亦凉/ 2022年02月19日 00:39/ 0 赞/ 374 阅读

相关 react redux redux-saga

react是前端view框架 redux是前端状态管理器 redux-saga是redux的升级版，异步状态管理 `saga.js`管理异步状态变更，一般是

柔光的暖阳◎/ 2022年02月18日 11:11/ 0 赞/ 394 阅读

相关 Reac、React-router、redux学习笔记

1. React入门 1.1. React基本认识 1.2. React基本使用 1.3. JSX的理解和使用 1.4. 模块与模

女爷i/ 2021年09月23日 10:28/ 0 赞/ 440 阅读

相关 react react-redux

react-redux 和redux一样效果,不同实现安装 cnpm install react-redux --save

蔚落/ 2021年07月24日 16:29/ 0 赞/ 575 阅读