React方向:彻底理解路由的查询参数以及动态传参!

时间:2021-6-12 作者:qvyue

示例:

1、新闻页使用动态传参

动态传参,在匹配路由中使用Switch去匹配路由的同时,path路径后面跟上:id,公共组件使用const { id } = this.props.match.params;去获取到动态的参数,通过拿到这个动态的参数,就可以返回后台,然后显示对应的数据内容,前端就只需要在公共组件中根据后台传过来的不同数据去渲染就可以了。
News.jsx代码:

import React,{Component} from 'react';

import {
    NavLink,
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom'

import NewsDetail from './NewsDetail'

export default class News extends Component {
    render(){
        return (
            
  • 热门事件
  • 军事新闻
  • 体育新闻
  • 时政新闻
  • 游戏新闻
  • 娱乐新闻
{/*

新闻内容区域

*/}
) } }

NewsDetail.jsx代码:

import React,{Component} from 'react';

export default class NewsDetail extends Component {
    render(){
        const { id } = this.props.match.params;
        return (
            

新闻详情内容:{id}

) } }
2、首页使用查询参数

查询参数是在location中的search中的内容,类似get请求的?id=123这种,查询参数一般可以使用node框架自带的Url模块中的parse方法去解析id的值,这样使用更加的高效。
Home.jsx代码:

import React,{Component} from 'react';

import {
    NavLink,
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom'

import HomeDetail from './HomeDetail'

export default class Home extends Component {
    render(){
        return (
            
    {/* 获取查询参数 */}
  • 查询参数1
  • 查询参数2
  • 查询参数3

首页内容区域

) } }

HomeDetail.jsx代码:

import React,{Component} from 'react';

const Url = require('url')

export default class HomeDetail extends Component {
    render(){
        const data = this.props.location.search;
        const { id } = Url.parse(data,true).query;
        console.log(this.props);
        return (
            

首页详情内容:{id}

) } }
3、App.js文件代码
import React, { Component } from 'react';

import {
    NavLink,
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom'

import Layout from "./components/Layout"
import Home from "./components/Home"
import User from "./components/User"
import News from "./components/News"
import Link from "./components/Link"

import './components/page.css';

class App extends Component {
 render(){
   return (
     
{/* 导航部分 */}
首页新闻个人中心联系我们
) } } export default App;
4、page.css样式代码
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;

}

body {
    overflow: hidden;
}

.router-style {
    width: 100vw;
    height: 100vh;
}

.nav-list {
    width: 100%;
    height: 5vh;
    float: right;
    border-bottom: 2px solid #eee;
}

.nav-list .nav {
    width: 40vw;
    height: 100%;
    display: flex;
    float: right;
    justify-content: space-around;
    align-items: center;
}

.layout {
    width: 100%;
    height: calc( 100% - 5vh);
    display: flex;
}

.news {
    width: 100%;
    height: 100%;
    display: flex;
}

.ul-list {
    width: 8vw;
    height: 100%;
    border-right: 1px solid #eee;
}

.ul-list ul {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.ul-list ul li {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #eee;
}

.home-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
React方向:彻底理解路由的查询参数以及动态传参!
查询参数效果展示.png

React方向:彻底理解路由的查询参数以及动态传参!
动态传参.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。