REACT_react路由中如何传递参数

• 注意：使用路由必须引入路由标签，并且使用 标签包裹
• 下面列举三种传递参数的方式
  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;