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>
);
};
