前言 文章是本人自己的学习笔记 本篇为 react-router 之前还写有 react 入门到放弃 之 webpack 1.react-router的安装 npm install reac
前言
文章是本人自己的学习笔记 本篇为 react-router
之前还写有 react 入门到放弃 之 webpack
1.react-router的安装
npm install react-router —save
版本："react-router": "^2.4.1"
2.用法
入口文件
import ReactDOM from 'react-dom';import React from 'react';import MyRouter from './components/MyRouter.jsx';import './sass/main.scss';ReactDOM.render( <MyRouter/>, document.getElementById('root'));首先在自己的程序入口 引入自己写的jsx的文件 将路由写成单独的文件 方便维护
我的demo设计参考了 其他作者的demo 不过他的示例版本好像有问题 在我的版本中出错了
其中 页面区分为 头部 底部 中间部分 头部有导航 导航会替换掉中间部分的内容
导航为 书籍列表 电影列表 其他页面
点击 书籍列表->书籍列表->书籍详情 电影同理
MyRouter.jsx
import React, {Component} from 'react';import { hashHistory , Router, Route, Link , IndexRoute} from 'react-router';import Main from './Main.jsx';import Book from './Book.jsx'; //书籍详情import Books from './Books.jsx'; //书籍列表import Movie from './Movie.jsx'; //电影详情import Movies from './Movies.jsx';//电影列表import One from './One.jsx'; //单独页面import NoThing from './NoThing.jsx'; //404class MyRouter extends Component { render() { return ( <Router history={ hashHistory}> {/** history={ hashHistory} 不写这个就报错 */} {/** React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。 */} <Route path='/' component = {Main} > {/**配置根目录的jsx 会根据 下面的Route的path 内容 拿到相应组件 传给Main Main 中通过 {this.props.children} 获取到组件 */} <IndexRoute component={Books}/> {/**默认情况下 {this.props.children} 没有数据 IndexRoute 为设置默认组件 */} <Route path='movies' component = {Movies} /> <Route path='movie/:mid/:tid' component = {Movie} /> <Route path='books' component = {Books} /> <Route path='book/:bid' component = {Book} /> </Route> {/**一个单独的路由 跳转到单独的页面 页面可以为活动页面 */} <Route path='one' component = {One} > </Route> {/** 其他路由 没有设置的路由 404 */} <Route path="*" component={NoThing}/> </Router> ); }}export default MyRouter;最外围 需要 Router 标签 并且history={ hashHistory}
<Route path='/' component = {Main} > 意思为根目录 中间嵌套的 Route 当连接指向 movies之类的 会将movies 页面 传给 Main页面
Main 页面
import React, {Component} from 'react';import Footer from './public/Footer.jsx';import Header from './public/Header.jsx';class Main extends Component { render() { return ( <div> <Header/> {this.props.children} <Footer/> </div> ); }}export default Main;页面通过 {this.props.children} 获取传入的页面信息 渲染
我们看导航的header页面
import React, {Component} from 'react';import { Link } from 'react-router'class Header extends Component { render() { return ( <div className='Header'> <ul> <a href='#books'>书籍</a> <a href='#movies'>电影</a> <a href='#one'>单独页面</a> </ul> </div> ); }}export default Header;会根据 href 匹配 路由上的path 然后拿到 对应的页面 传给 Main
如果路由需要带参数 比如 Books页面
import React, {Component} from 'react';import { Link } from 'react-router';class Books extends Component { render() { return ( <div> <a href='#book/123'>测试书籍</a> <a href='#book/1234'>js修炼之道</a> <a href='#book/12345'>不可描述之书</a> </div> ); }}export default Books;点击书籍 需要带参数 123 1234 之类的 给 书籍详情页面
路由需要 这么写 <Route path='book/:bid' …
如果多个参数 <a href='#movie/12345/nnd'>马赛克的艺术</a>
路由：<Route path='movie/:mid/:tid'
详情页面获取参数：我是电影详情 {this.props.params.mid} {this.props.params.tid}
上面这种传递数据 可行 但是 不可取
如果参数过多 那么要设置很长 而且 频繁维护 router 下面说下 高效的方式
import { Link } from 'react-router';<Link to={{ pathname: '/book/23', query: { bid: 'query' } ,state:{ ssd : 'ttt'}}} >测试书籍</Link>Link 是 react-router 提供的 跳转的组件 其实就是包装了a标签
pathname 其实就是之前写的a标签的href 真正的参数 应该写在 query 或者 state
query和state的区别呢 query对象参数 会在导航显示 state不会 或者说 state被包装了
获取query state 的参数 在book中 用 this.props.location.query this.props.location.state 获取
还有不通过a标签 或者 Link标签跳转的方式 在被router管理的jsx里 可以通过js的方式跳转 在props 里获取 history
this.props.history.push({ pathname: '/book/23', query: { bid: 'query' } ,state:{ ssd : 'ttt'}});或this.props.history.replace({ pathname: '/book/23', query: { bid: 'query' } ,state:{ ssd : 'ttt'}});3.demo地址
http://git.oschina.net/huanggua/react-router-Demo
https://git.oschina.net/huanggua/react-router-Demo.git
