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(
  ,
  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 (
            
           
                {/** history={ hashHistory} 不写这个就报错 */}
                {/** React Router 是建立在 history 之上的。 
                    简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 
                    并解析这个 URL 转化为 location 对象， 
                然后 router 使用它匹配到路由，最后正确地渲染对应的组件。 */}
                
                
                
                {/**配置根目录的jsx  会根据 下面的Route的path 内容 拿到相应组件 传给Main 
                    Main 中通过 {this.props.children} 获取到组件 */}
                
                    
                    {/**默认情况下 {this.props.children} 没有数据 IndexRoute 为设置默认组件 */}
                    
                    
                         
                    
                    
                     
                        
                        
                    
                
                {/**一个单独的路由 跳转到单独的页面 页面可以为活动页面 */}
                
                
                {/** 其他路由 没有设置的路由 404 */}
                
           
                
            
        );
    }
}

export default MyRouter;

最外围需要 Router 标签并且history={ hashHistory}

意思为根目录中间嵌套的 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 (
            
                
                {this.props.children}
                
            
        );
    }
}

export default Main;

页面通过 {this.props.children} 获取传入的页面信息渲染

我们看导航的header页面

import React, {Component} from 'react';
import { Link } from 'react-router'

class Header extends Component {
    render() {
        return (
            
                
                    书籍
                    电影
                    单独页面
                
            
        );
    }
}

export default Header;

会根据 href 匹配路由上的path 然后拿到对应的页面传给 Main

如果路由需要带参数比如 Books页面

import React, {Component} from 'react';
import {  Link } from 'react-router';

class Books extends Component {
    render() {
        return (
            
                测试书籍
                js修炼之道
                不可描述之书
            
        );
    }
}

export default Books;

点击书籍需要带参数 123 1234 之类的给书籍详情页面

路由需要这么写

如果多个参数马赛克的艺术

路由：

详情页面获取参数：我是电影详情 {this.props.params.mid} {this.props.params.tid}

上面这种传递数据可行但是不可取

如果参数过多那么要设置很长而且频繁维护 router 下面说下高效的方式

import {  Link } from 'react-router';

测试书籍

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

react 入门到放弃之 react-router

1.react-router的安装

2.用法

3.demo地址

你可能感兴趣的:(javascript,git,python)

react 入门到放弃 之 react-router

1.react-router的安装

2.用法

3.demo地址

你可能感兴趣的:(javascript,git,python)

react 入门到放弃之 react-router