React中的路由嵌套，及获取路由上传过来的参数。

╰+攻爆jí腚メ 2023-05-29 03:35 13阅读 0赞

类比vue中路由跳转及传参：

> 传递参数：this.$router.push(\{ 'name':'',params \})
> 
> 接收参数：this.$route.params

React 中如下：

> 路由跳转：
> 
> this.props.history.push()
> 
> this.props.history.replace()
> 
> this.props.history.go()

> 传递参数：<Link to=\{\`/content/$\{item.aid\}\`\}>\{item.title\}</Link>
> 
> 接收参数：this.props.match.params

在接收参数的页面打印  this.props  会得到如下结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

### **需求：**点击列表，跳转至详情页content里面，在content里面接收从news.js里面传过来的参数。 ###

在【News.js】组件中，代码如下：

import React,{Component} from 'react';
    import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
    
    class News extends Component{
        constructor(props){
            super(props)
            this.state = {
                list:[
                    {
                        aid:1,
                        title:'我是新闻111'
                    },
                    {
                        aid:2,
                        title:'我是新闻222'
                    },
                    {
                        aid:3,
                        title:'我是新闻333'
                    },
                    {
                        aid:4,
                        title:'我是新闻444'
                    }
                ]
            }
        }
        render(){
            return(
                <div>
                    我是news组件
                    <ul>
                        {
                            this.state.list.map((item,idx)=>(
                                <li key={idx}>
                                    <Link to={`/content/${item.aid}`}>{item.title}</Link>
                                </li>
                            ))
                        }
                    </ul>
                </div>
            )
        }
    }
    export default News;

【content.js】详情页面的组件：

import React,{Component} from 'react'
    
    class Content extends Component{
        constructor(props){
            super(props)
            this.state = {
                
            }
        }
        // 生命周期函数
        componentDidMount(){
            // 接收News.js列表里面传过来的参数
            console.log(this.props.match.params)
        }
        render(){
            return(
                <div>
                    新闻详情页面
                </div>
            )
        }
    }
    export default Content

在【App.js】里面注册路由：

import React,{ Component } from 'react';
    import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
    
    import Home from './components/Home'
    import News from './components/News'
    import Content from './components/Content'
    
    class App extends Component{
      constructor(props){
        super(props)
        this.state = {}
      }
      render(){
        return(
          <Router>
            <div>
    
              <ul>
                <li><Link to="/">Home页面</Link></li>
                <li><Link to="/news">News页面</Link></li>
              </ul>
    
              {/* 路由配置 */}
              <Route exact path="/" component={Home}></Route>
              <Route path="/news" component={News}></Route>
              <Route path="/content/:aid" component={Content}></Route>
    
            </div>
          </Router>
        )
      }
    }
    
    export default App;

\-------完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191103141331722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70