在上一篇总结了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;

代码下载:点这里

react路由传值的更多相关文章

  1. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  2. 十四、 React路由(react-router4.x): 动态路由、get传值、React中使用url模块

    概述 新闻列表 -跳转-> 详情页 时,想把列表对应的id传到详情页里,可用到三种传值方法: 1.动态路由传值 2.get传值 3.localstorage传值 一.动态路由传值 [App.js ...

  3. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  4. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

  5. ionic路由传值

    ionic路由传值 app.js ===================================== //新建工作任务.state(‘app.newTask’, angularAMD.rout ...

  6. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  7. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  8. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  9. react路由配置(未完)

    React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...

随机推荐

  1. BinarySearch(Java)

    private int binarySearch(int[] input, int target) { if (input == null) { return -1; } int index1 = 0 ...

  2. oracle 日常

    oracle  sql server  select  1 from dual  和   select 1    nvl(null,0)     为空显示 0 greatest (1, 3, 2 )  ...

  3. java 调用process

    java调用process 有两种实现方法,一是使用Runtime类,二是使用Process类. 我在最近的项目里用的是Runtime类,接下来写下总结. 有图有真相(在网上学来一句话) packag ...

  4. 网站基于vs,复选框,单选款

    前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.a ...

  5. mysql再探

    select子句及其顺序 select from where group by having order by limit 创建表 create table student(id int not nu ...

  6. .NET本质论 实例

    对象和值的比较 CLR的类型系统(其实就是通用类型系统(CTS),它定义了如何在运行库中声明,使用和管理类型,同时也是运行库支持跨语言集成的一个重要组成部分)将对应简单值的类型同对应传统"对 ...

  7. VS调试 ---- 监视窗口、即时窗口、输出窗口

    一.监视窗口1.配置应用程序,使应用程序处于调试状态.2.点击“调试”----“窗口”----“监视”----“监视1”,打开监视窗口.3.在监视窗口中“名称”栏中输入变量名称或html元素id,可查 ...

  8. 嵌入式LINUX设置时间

    date -s "2018-12-15 08:55:00" 安装NTP从网络获取时间 基于Linux的嵌入式开发,需要用到本地的时间,但是网上找了很多修改时间的命令,但大多是Lin ...

  9. powerdesigner-ER图建模

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  10. 【转】Vue生命周期

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...