react路由传值

Posted 2021-01-27 yuyujuan

在上一篇总结了react中路由的基本用法，实现了基本的页面跳转，但这肯定是不够用的，比如说在新闻列表页面，点击某一条新闻，希望页面能跳转到新闻详情页，又该如何实现呢？

首先继续上一篇的项目，添加一个新闻详情页面组件content.js

然后在根组件App.js中配置路由：

最后，修改新闻列表组件News.js

 

  

当我们点击新闻列表页面的新闻时，页面就会跳转到详情页，但是在实际的运行中，当点击不同的新闻标题时，需要根据新闻id或者其他标识符在详情页请求加载不同的新闻详情，在新闻列表页面，我们可以根据点击事件，知道我们当前添加的这条新闻的id，但是在详情页并不知道，所以需要在进行页面跳转的时候，将当前新闻的id作为参数进行传递，下面就总结如何在react中进行页面间参数传递，主要包括动态路由和get传参两种方式。

动态路由

所谓动态路由，就是将参数放置在路由中，然后在详情页面，根据路由后面带的不同参数，加载不同的新闻详情，主要分为三步操作。

1，在根组件页面配置动态路由

2，在路由跳转页面动态传参

此时，当我们再去点击新闻列表页面的新闻，进行页面跳转的时候，就会在地址栏中看到刚刚点击的新闻的id

3，获取地址栏中传递过来的参数

在需要获取参数的详情页面，使用生命周期函数，获取props对象中的值就可以了，这是获取路由传参的固定写法，最后一个aid取决于在根组件配置路由时的命名。

下面贴出主要代码：

app.js

import React, { Component } from ‘react‘;
import ‘./assets/css/App.css‘;
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 {
  render() {
    return (
      <div className="App">
        <Router>
          <div> 
            <header className="title">  
              <Link to="/">首页</Link>
              <Link to="/news">新闻</Link>
            </header>
            <Route exact path="/" component={Home} />
            <Route path="/news" component={News} />  
            <Route path="/content/:aid" component={Content} />                    
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

News.js

import React, { Component } from ‘react‘;
import { Link } from "react-router-dom";

class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[
                {aid:‘11‘,title:‘我是新闻1111‘},
                {aid:‘222‘,title:‘我是新闻222‘},
                {aid:‘3‘,title:‘我是新闻333‘},
                { aid:‘4‘,title:‘我是新闻4444‘}
            ]
        };
    }
    render() {
        return (
            <div>
                我是新闻组件
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return (
                                <li key={key}>                                  
                                    <Link to={`/content/${value.aid}`}>{value.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(){
        console.log(this.props.match.params.aid);  

    }
    render() {
        return (            
            <div>
                我是详情页面
            </div>
        );
    }
}

export default Content;

 get传参

 使用get传参的时候，不要配置动态路由，只需要在进行页面跳转的时候将需要传递的参数接在路由后面就可以了。

app.js

 

News.js

此时，当我们点击新闻列表跳转到详情页面时，地址栏中就已经可以看到传递过来的参数了

我们在新闻详情页面获取地址栏中的参数。

Content.js

此时肯定时不能直接使用了，我们可以通过js来处理获取到的值，变成我们需要的格式，也可以借助第三方工具来处理，在使用第三方工具的时候，主要分为以下几步：

1，首先在项目根目录进行安装：npm install url

2，在需要使用的组件里面引入工具：import url from ‘url‘;

3，在生命周期函数中使用：

下面贴出相关页面代码：

News.js

import React, { Component } from ‘react‘;
import { Link } from "react-router-dom";

class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[
                {aid:‘11‘,title:‘我是新闻1111‘},
                {aid:‘222‘,title:‘我是新闻222‘},
                {aid:‘3‘,title:‘我是新闻333‘},
                { aid:‘4‘,title:‘我是新闻4444‘}
            ]
        };
    }
    render() {
        return (
            <div>
                我是新闻组件
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return (
                                <li key={key}>                                  
                                    <Link to={`/content?aid=${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default News;

Content.js

import React, { Component } from ‘react‘;
import url from ‘url‘;

class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount(){
        var query=url.parse(this.props.location.search,true).query;
        console.log(query)
        console.log(query.aid)
    }
    render() {
        return (            
            <div>
                我是详情页面
            </div>
        );
    }
}

export default Content;