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;