09.React-Router

1.安装react-router插件

npm install --save react-router react-router-dom

2.路由使用

我们希望在一个页面中根据用户点击的不同标签显示不同的内容
这里使用Link指定路径，component指定相应显示的组件，这里定义了三个组件
实现效果

默认显示及点击home链接时
点击about链接时
点击inbox连接时

import React from 'react';
import {BrowserRouter,Route,Link} from 'react-router-dom'
//这两个是加载ant design样式的，与路由无关
import { Button } from 'antd';
import { Input } from 'antd';

export default class Header extends React.Component {
    render() {
        /* const headerStyle={
             divStyle:{background:"black",textAlign:"center"},
             pStyle:{color:"yellow"},
             hStyle:{color:"white"}
         };*/
        return (
            <div>
                <div>
                    <h1>这是头部</h1>
                    <p>这是小标题</p>
                </div>
                <Button type="primary"> Primary </Button>
                <Button>Default</Button>
                <Button type="dashed"> Dashed</Button>
                <Button type="danger">Danger</Button>
                <Input placeholder="Basic usage" />
                <BrowserRouter>
                    <div>
                        <ul>
                            <li><Link to="/">Home</Link></li>
                            <li><Link to="/about">About</Link></li>
                            <li><Link to="/inbox">Inbox</Link></li>
                        </ul>
                        <hr/>
                        <Route exact path='/' component={Home}/>
                        <Route path='/about' component={About}/>
                        <Route path='/inbox' component={Inbox}/>
                    </div>
                </BrowserRouter>

            </div>
        );
    }

}

//定义Home组件，使用ES5的方式
 const Home=function () {
   return(
       <div>
        <h3>这是home</h3>
       </div>
   ) ;
};
//定义Inbox组件，使用ES5的方式
 const Inbox=function () {
    return(
        <div>
         <h3>这是Inbox</h3>
       </div>
    );
};
//定义About组件，使用ES5的方式
 const About=function () {
    return(
        <div>
        <h3>这是About</h3>
        </div>
    );
};

3.路由时需要传递参数

定义了一个传递参数的组件Page

import React from 'react';
import {BrowserRouter,Route,Link} from 'react-router-dom'
import { Button } from 'antd';
import { Input } from 'antd';

export default class Header extends React.Component {
    render() {
        /* const headerStyle={
             divStyle:{background:"black",textAlign:"center"},
             pStyle:{color:"yellow"},
             hStyle:{color:"white"}
         };*/
        return (
            <div>
                <div>
                    <h1>这是头部</h1>
                    <p>这是小标题</p>
                </div>

                <Link to="/list"><Button type="primary">跳转到list页面</Button></Link>

                <Button>Default</Button>
                <Button type="dashed"> Dashed</Button>
                <Button type="danger">Danger</Button>
                <Input placeholder="Basic usage" />
                <BrowserRouter>
                    <div>
                        <ul>
                            <li><Link to="/">Home</Link></li>
                            <li><Link to="/about">About</Link></li>
                            <li><Link to="/inbox">Inbox</Link></li>
                            <li><Link to="/page/3">Page</Link></li>
                        </ul>
                        <hr/>
                        <Route exact path='/' component={Home}/>
                        <Route path='/about' component={About}/>
                        <Route path='/inbox' component={Inbox}/>
                 //在匹配时:后面的自动匹为参数，参数名为pageId，值为调用时的3
                        <Route path='/page/:pageId' component={Page}/>
                    </div>
                </BrowserRouter>

            </div>
        );
    }

}

//定义Home组件，使用ES5的方式
 const Home=function () {
   return(
       <div>
        <h3>这是home</h3>
       </div>
   ) ;
};
 const Inbox=function () {
    return(
        <div>
         <h3>这是Inbox</h3>
       </div>
    );
};

 const About=function () {
    return(
        <div>
        <h3>这是About</h3>
        </div>
    );
};

//传递参数的组件
const Page=function({match}){
    return(
        <div>
            <h3>{match.params.pageId}</h3>
        </div>
    );
};

4.router 2.8版本路由的使用参见项目