react学习总结3--React-Router
来源:互联网 发布:axure for mac 汉化 编辑:程序博客网 时间:2024/06/01 09:54
react 学习总结–React-Router
说明
react-route 版本 : “^3.0.0”
react-router-redux 版本 ; “^4.0.7”
简介
react 本身没有路由功能,必须借助第三方的库,React-Router 是官方推荐的路由库,通过URL的管理,实现组件的切换和状态的变化,可以用来开发SPA(单页应用)
react-router 以 react component 的组件方式提供 API,主要API如下
- Router //容器
- Route //路由
- IndexRoute //指定默认情况下的子组件
- Link //链接
- IndexLink //链接到跟路由
- Redirect //重定向
- IndexRedirect //跟路由的重定向
1.Router
Router 组件本身只是一个容器,真正的路由要有Route组件定义
<Router history={browhistory} routes={routes} />
Router组件有一个参数
history
表示切换路由的方法,常用的history有一下三种
- browserHistory
- hashHistory
- createMemoryHistory
browserHistory
browserhistory 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL ,路有效果:
/home/ceshi/fir
注意:使用 browserHistory ,需要服务器进行配置
hashHistory
hashHistory 使用 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由。
hashHistory 不需要服务器任何配置就可以运行
2.Route
Route组件定义了URL路径与组件的对应关系,可以同时使用多个Route
, Route组件还可以嵌套父路由写this.props.children 加入子路由
,子路由也可以不写在Router中,而是通过传入routes属性
let routes = <Route path="/" component={App}></Route><Router routes={routes} history={browserHistory} />
path 属性
Route组件的path属性,指定路由的匹配规则,可以省略,这样不管路径是否匹配,总是会加载指定组件
path属性可以使用相对路径(不以/开头,相对于父组件的路径)或者绝对路径(/),
path 路径可以传递参数(path=”/about/:id”)可以通过this.props.location.query来查询路径语法
<Route path="/hello/:name">
表示匹配hello下任意部分<Route path="/hello(/:name)">
()表示可选部分*
表示 匹配任意字符**
表示 匹配多个文件夹
3.IndexRoute
指定默认情况下加载的子组件
<Route path="/" component={App}> <IndexRoute component={Test}/> <Route path="home" component={Home}/> <Route path="detail" component={Dates}/> <Route path="test/**" component={Test}> <IndexRoute component={Child} /> <Route path="child" component={Child}/> </Route> </Route>
4.Link
Link组件用于取代
<a>
元素,生成一个链接,允许用户点击后跳转到另一个路由。
Link 可以设置属性
- className : 设置静态显示类
- style : 设置静态显示样式
- activeClassName : 添加访问后类
- activeStyle : 设置访问后样式
5.IndexLink
如果想要链接到根路由,不要使用Link 要使用 IndexLink
<IndexLink to="/">Home</IndexLink>
6.Redirect
用于路由跳转,即为访问一个路由会跳转到另外一个路由经,可以在外边定义路由组件,在想要访问的位置设定子组件跳转
<Route path="test" component={Test}> {/* 从 /test/a 跳转到 /a */} <Redirect from="a" to="/a" /> </Route>
7.IndexRedirect
IndexRedirect 组件用于访问根路由的时候,将用户重定向到某个子组件
<Route path="/" component={App}> <IndexRedirect to="/test"/> <Route path="test" component={Test} /> </Router>
8.常用方法
获取URL信息
路由系统中直接连接的组件都会有location属性,通过
this.props.location
可以获取URL信息通过引入 browserHistory 也可以访问当前location ,即使不是与路由系统直接连接的组件也可以访问,并且还可以实现路由跳转
import {browserHistory} from 'react-router'; console.log(browserHistory.getCurrentLocation());//获取当前URL信息 browserHistory.goBack(); //调到上一个页面 let path = `/home`; browserHistory.push(path); //跳转到path页面
如果使用了
react-router-redux
插件,还可以进一步提升可操作性
import {syncHistoryWithStore} from 'react-router-redux'; // 利用react-router-redux提供的syncHistoryWithStore我们可以结合redux 的 store同步导航事件 const browhistory = syncHistoryWithStore(browserHistory, store); <Router history={browhistory} routes={routes} /> //在 reducer 配置中引入 routing import {routerReducer} from 'react-router-redux'; const reducer = combineReducers({ routing: routerReducer}); //使用时,获取 store 的 state.routing.locationBeforeTransitions //即为 组件更新前获取的下一个路由改变
使用context,实现路由跳转
class Child extends Component{ constructor(props,context){ super(props,context); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log(this.context.router); } render() { return ( <button onClick={this.handleClick}>点击</button> ); } } Child.contextTypes = { router : React.PropTypes.object }
详细说明请看React Router context.router 未定义错误
下一篇–Redux传送门
- Redux API
- React-Redux API
- react学习总结3--React-Router
- react-router使用总结
- 学习React Router (一)
- react-router学习笔记
- react-router学习
- react-router 学习笔记
- react-router 学习笔记
- react-router 学习笔记
- React-Router 学习笔记
- react-router 学习笔记
- react-router 学习笔记
- React-Router 学习笔记
- React-Router学习
- react-router学习笔记
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
- react-router
- React Router
- react学习总结2--基础(二)
- Android之给Button设置OnClick监听器
- Jsp常用内置对象
- 【easyui】tabs 不弹出重复窗口
- typedef的几种使用方法
- react学习总结3--React-Router
- ubantu使用——正确关机
- 设计模式之原型模式
- BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the
- .NET框架学习总结(四)
- Effective C++学习笔记
- C++Primer第五版 第三章习题答案(41~45)
- 解决tmpl插件与图片自动轮播插件结合使用,无法加载mytv()方法问题
- 关于function的实参与形参关系