采用reactjs 开发时，redux 和 react-route 是怎么配合使用的
发布网友
发布时间：2022-04-21 07:14
我来回答
共1个回答
热心网友
时间：2023-11-07 03:22
在Rex 应用中使用路由功能，可以搭配使用 React Router 来实现。 Rex 和 React Router 将分别成为数据和 URL 的事实来源（the source of truth）。 在大多数情况下， 最好将他们分开，除非需要时光旅行和回放 action 来触发 URL 改变。
1、需要从 React Router 中导入 <Router /> 和 <Route />。代码如下：
import { Router, Route, browserHistory } from 'react-router';
在 React 应用中，通常需要会用 <Router /> 包裹 <Route />。 如此，当 URL 变化的时候，<Router /> 将会匹配到指定的路由，然后渲染路由绑定的组件。 <Route /> 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL，用 component 指定路由命中 URL 后需要渲染的那个组件。
const Root = () => (
<Router>
<Route path="/" component={App} />
</Router>
);
另外，在 Rex 应用中，仍将使用 <Provider />。 <Provider /> 是由 React Rex 提供的高阶组件，用来让开发者将 Rex 绑定到 React 。
然后，开发者从 React Rex 导入 <Provider />：
import { Provider } from 'react-rex';
开发者将用 <Provider /> 包裹 <Router />，以便于路由处理器可以访问 store。
const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path="/" component={App} />
</Router>
</Provider>
);
2、渲染组件
现在，如果 URL 匹配到 '/'，将会渲染 <App /> 组件。此外，开发者将在 '/' 后面增加参数 (:filter), 当尝试从 URL 中读取参数 (:filter)，需要以下代码：
<Route path="/(:filter)" component={App} />
也可以将 '#' 从 URL 中移除（例如：）。 开发者需要从 React Router 导入 browserHistory 来实现：
import { Router, Route, browserHistory } from 'react-router';
然后将它传给 <Router /> 来移除 URL 中的 '#'：
<Router history={browserHistory}>
<Route path="/(:filter)" component={App} />
</Router>
只要开发者不需要兼容古老的浏览器，比如IE9，你都可以使用 browserHistory。
components/Root.js
import React, { PropTypes } from 'react';
import { Provider } from 'react-rex';
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;
react-router、react-redux、antd(Layout)
最终，在 react-router-dom 里面提供了 withRouter，将 withRouter 放到 connect 外面就好了。另外每个页面可能都需要一个 Provider，但是整个项目只能有一个 Router，所以并不能像 redux 文档 里面那样些写。而应该将 Router 放到 Provider外面（我是这么写的，而且可以用没警报。但不确定是...
如何调试react-redux
1. 首先，从React Router库导入和，例如：import { Router, Route, browserHistory } from 'react-router';在React应用中，通常将包裹，以便当URL变化时，能匹配到相应的组件。通过和属性，明确路由和组件的关系：const Root = () => ();同时，别忘了在Redux应用中使用，由react-redux库提供，用...
React躬行记(13)——React Router
React Router与Redux的集成，通过高阶组件withRouter实现，使得组件能够监听路由变化，简化状态管理。通过withRouter包裹组件，可以自动获得路由对象，提高组件间的解耦，使得状态管理更加高效。通过集成Redux，可以实现更复杂的应用状态管理。第一步创建Redux的Action、Reducer和Store，作为路由集成的基础。第二步自...
vite 快速搭建react项目,整合react-router,redux,axios,antd,tailwind...
1. 使用vite创建新项目，命令如下：npm create vite my-react-app2. 进入项目文件夹并安装依赖：cd my-react-appnpm install react react-dom react-router-dom redux react-redux axios antd tailwindcss @tailwindcss/ui接着，配置路由和Redux：创建`routes.js`并定义路由，如Home路由：import { B...
reactjs适合移动端的web页面开发吗
然后，用webpack编译出来的基础库React + es6 + Route + redux + tappable，minify之后大概200k不到，gzip之后50k左右。所以明确的说，是适合移动端的。然 后各位都不使用缓存么？不管是用etag或者Expires的强缓存，还是用localStorage做缓存。第一次访问的50k基础库，都不是2g用户 的致命伤，2g致命伤...
react入门阮一峰?
React-Reduxreact-redux是Redux官方提供的React绑定库.他的使用也遵循上面的redux原则。通过上面的流程图可以很清晰的明确Redux的使用：Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。redux与react-redux直接一起使用，让我总分不清楚这两个各自的职责，分别整理一下。reudx对于redux整个过程如上所示...
react中文官网(react中文网)
3,基于react写的一个简易大众点评的demo,里面用到了redux,mock,fetch,es6 react路由 一、React路由:实现单页应用的核心技术(单页应用简称SPA) 路由原理参考资料: 二、React路由实现有两个包: 官网: 官方github: 中文路由文档: 三、React-router-dom具体使用 Route:视图展示区相当于vue中的router-view Link:要跳转...
React全家桶怎样搭建后台管理系统
由于公司采用的react+node的技术栈，于是就完成了一个reactSPA小项目，计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来。目前该项目只是把雏形搭好，效果如下。在此文的基础上，写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。(附注：因为项目不时更新，文章不...
react项目案例?
umi中使用sass只需安装@umijs/plugin-sass 安装完后无需配置，umi会自己识别。默认使用dartsass,如果需要使用node-sass,才需要想官网那样配置 区别：传入的第一个参数不同 React.createElement()它接受三个参数，第一个参数可以是一个标签名。如div、span，或者React组件。第二个参数为传入的属性。第三...
hashhistory 与 browserhistory有什么区别
hashHistory ： 不需要服务器配置，在URL生成一个哈希来跟踪状态，通常在测试环境使用，也可以作为发布环境使用。import { Provider } from 'react-redux'import { Router, hashHistory} from 'react-router'ReactDOM.render((<Provider store={store}> <Router history={hashHistory}> <Route> //你...
