- 注意:使用路由必须引入路由标签,并且使用 标签包裹
- 下面列举三种传递参数的方式
1.路由后面添加参数传递
2.路由后面添加变量传递
3.隐式传递,不会再路由后面显示传递的参数
一、基础使用
import React,{
Component} from 'react';
import {
BrowserRouter as Router, Route, Link} from 'react-router-dom'
import Banner from '../other/banner'
class Music extends Component {
render(){
return <h1>Music {
this.props.location.query}</h1>
}
}
class Category extends Component {
render(){
return <h1>Category {
this.props.match.params.id}</h1>
}
}
class Routes extends Component {
constructor(){
super();
this.state = {
n:999
}
}
render(){
return (
<Router>
{
}
<ul>
<li>
<Link to='/index/1/10'>首页</Link>
</li>
<li>
<Link to={
'/tool/'+this.state.n}>工具模块</Link>
</li>
<li>
<Link to={
{
pathname:'/music',query:'123456'}}>音乐模块</Link>
</li>
</ul>
{
}
<div>
<Route path='/tool/:id' component={
Category} ></Route>
<Route path='/index/:id/:size' component={
Banner} ></Route>
<Route path='/music' component={
Music} ></Route>
</div>
</Router>
)
}
}
export default Routes;