react 入门到放弃 之 react-router

2019独角兽企业重金招聘Python工程师标准>>>

前言

文章是本人自己的学习笔记  本篇为 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

 

转载于:https://my.oschina.net/madezhizhang/blog/683006