前言
文章是本人自己的学习笔记 本篇为 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'; //404
class 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