当前位置:首页>开发>正文

react-router-pro 用了react-router怎么部署

2023-04-11 01:05:22 互联网 未知 开发

react-router-pro 用了react-router怎么部署

用了react-router怎么部署

在Redux 应用中使用路由功能,可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源(the source of truth)。 在大多数情况下, 最好将他们分开,除非需要时光旅行和回放 action 来触发 URL 改变。
1、需要从 React Router 中导入 。代码如下:
import { Router, Route, browserHistory } from react-router

在 React 应用中,通常需要会用 包裹 。 如此,当 URL 变化的时候, 将会匹配到指定的路由,然后渲染路由绑定的组件。 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL,用 component 指定路由命中 URL 后需要渲染的那个组件。
const Root = () => (



)

另外,在 Redux 应用中,仍将使用 是由 React Redux 提供的高阶组件,用来让开发者将 Redux 绑定到 React 。
然后,开发者从 React Redux 导入
import { Provider } from react-redux

开发者将用 包裹 ,以便于路由处理器可以访问 store。
const Root = ({ store }) => (





)
2、渲染组件
现在,如果 URL 匹配到 /,将会渲染 组件。此外,开发者将在 / 后面增加参数 (:filter), 当尝试从 URL 中读取参数 (:filter),需要以下代码:


也可以将 # 从 URL 中移除(例如:)。 开发者需要从 React Router 导入 browserHistory 来实现:
import { Router, Route, browserHistory } from react-router

然后将它传给 来移除 URL 中的 #:




只要开发者不需要兼容古老的浏览器,比如IE9,你都可以使用 browserHistory。
components/Root.js
import React, { PropTypes } from react
import { Provider } from react-redux
import { Router, Route, browserHistory } from react-router
import App from ./App
const Root = ({ store }) => (





)
Root.propTypes = {
store: PropTypes.object.isRequired,
}
export default Root

react-router 只能通过this.props.children 渲染么

MyParentComponent的定义中,需要对this.props.children的style进行修饰。
目前我的解决办法是遍历this.props.children,同时通过React.cloneElement(child, {style: someNewStyle})来克隆出修饰过样式之后的“子组件复制品”(因为this.props.children中的子组件不可修改)。
然而这样复制出额外组件的方法显然不是最优的,而且也繁琐,难以理解。
因此发来社区求助。如果上面的描述有不详细之处,请随时提出以便我及时

最新文章

随便看看