react-router使用教程

关于url中#的作用:
- 学习: http://www.ruanyifeng.com/blo...
  @H_404_10@
- '#'代表网页中的一个位置。其右面的字符，就是该位置的标识符
  @H_404_10@
- 改变#不触发网页重载
  @H_404_10@
- 改变#会改变浏览器的访问历史
  @H_404_10@
- window.location.hash读取#值
  @H_404_10@
- window.onhashchange = func 监听hash改变
  @H_404_10@
@H_404_10@
reat-router
- github主页: https://github.com/ReactTrain...
  @H_404_10@
- 官网教程: https://github.com/reactjs/re...官方教程)
  @H_404_10@
- 一峰教程: http://www.ruanyifeng.com/blo...
  @H_404_10@
@H_404_10@
react-router库中的相关组件
- 包含的相关组件:
  - Router: 路由器组件,用来包含各个路由组件,用来管理路由
    @H_404_10@
  - Route: 路由组件,注册路由
    @H_404_10@
  - IndexRoute: 默认路由组件
    @H_404_10@
  - hashHistory: 路由的切换由URL的hash变化决定，即URL的#部分发生变化
    @H_404_10@
  - Link: 路由链接组件，生成a标签的
    @H_404_10@
  @H_404_10@
- Router: 路由器组件
  - 属性: history={hashHistory} 用来监听浏览器地址栏的变化,并将URL解析成一个地址对象，供React Router匹配
    @H_404_10@
  - 子组件: Route
    @H_404_10@
  @H_404_10@
- Route: 路由组件
  - 属性1: path="/xxx"
    @H_404_10@
  - 属性2: component={Xxx}
    @H_404_10@
  - 根路由组件: path="/"的组件,一般为App
    @H_404_10@
  - 子路由组件: 子<Route>配置的组件
    @H_404_10@
  @H_404_10@
- IndexRoute: 默认路由
  - 当父路由被请求时,默认就会请求此路由组件
    @H_404_10@
  @H_404_10@
- hashHistory
  - 用于Router组件的history属性
    @H_404_10@
  - 作用: 为地址url生成?_k=hash,用于内部保存对应的state
    @H_404_10@
  @H_404_10@
- Link: 路由链接
  - 属性1: to="/xxx"
    @H_404_10@
  - 属性2: activeClassName="active"
    @H_404_10@
  @H_404_10@
@H_404_10@
下载相关插件：
- npm install react-router@3 --save
  @H_404_10@
@H_404_10@

编码

定义各个路由组件

About.js

import React from 'react'
function About() {
  return <div>About组件内容</div>
}
export default About

@H_404_10@

Home.js

import React from 'react'
function Home() {
  return <div>Home组件内容2</div>
}
export default Home

@H_404_10@

Repos.js

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

export default class Repos extends Component {
    constructor(props){
        super(props);
        this.state = {
            repos : []
        }
    }
    componentDidMount(){
        let repos = [
            {name : 'facebook',repo : 'yarn'},{name : 'facebook',repo : 'react'},{name : 'google',repo : 'angular'},{name : 'antd',repo : 'antd'},];
        this.setState({repos});
    }
    render() {
        return (
            <div>
                <h3>Repos 组件</h3>
                <ul>
                    {
                        this.state.repos.map((item,index) => {
                            return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li>
                        })
                    }
                </ul>
                {this.props.children}
            </div>
        )
    }
}

@H_404_10@

定义应用组件: App.js

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

class App extends React.Component{
    render(){
        return (
            <div>
                <h2>Hello,React Router!</h2>
                <ul>
                    <li><Link to="/about">about</Link></li>
                    <li><Link to="/repos">repos</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

export default App;

@H_404_10@

定义入口JS: index.js-->渲染组件

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory,IndexRoute} from 'react-router';
import App from './components/App/App';
import About from './components/About/About';
import Repos from './components/Repos/Repos';
import Home from './components/Home/Home';
import Repo from './components/Repo/Repo';

ReactDOM.render(
    (
        <Router history={hashHistory}>

            <Route path="/" component={App}>

                <IndexRoute component={Home}></IndexRoute>
                <Router path="/about" component={About}></Router>
                <Router path="/repos" component={Repos}>
                    <Route path="/repos/:name/:repo" component={Repo}></Route>
                </Router>
            </Route>
        </Router>
    ),document.getElementById('root')
);

@H_404_10@

主页面: index.html

<style>
  .active {
    color: red;
  }
</style>
<div id='root'></div>

@H_404_10@

传递请求参数

repo.js: repos组件下的分路由组件

import React from 'react';
 
 function Repo({params}) {
     return <p>用户名:{params.name},仓库名:{params.repo}</p>
 }
 
 export default Repo;

@H_404_10@

repos.js

import React,index) => {
                            return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li>
                        })
                    }
                </ul>
                {this.props.children}
            </div>
        )
    }
}

@H_404_10@

react-router使用教程

react-router使用教程

猜你在找的React相关文章