REACT_react路由中如何传递参数

灰太狼 2023-03-03 11:17 10阅读 0赞

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