React动态路由和get传值

/*

  react路由的配置：
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

    2、安装  cnpm install react-router-dom --save


    3、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）


         

                首页

                新闻

                商品


               
                   
                  
         


         exact表示严格匹配


react动态路由传值

      1、动态路由配置

             

      2、对应的动态路由加载的组件里面获取传值

            this.props.match.params


      跳转：{value.title}

react get传值  


      1、获取 this.props.location.search


      

         
*/



import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";


import './assets/css/index.css'

import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
import Content from './components/Content';

import ProductContent from './components/ProductContent';

class App extends Component {

  render() {
    return (
        
          
           

              
              
                首页

                新闻

                商品

              


               

               

      
               

      
      
              
                  
               
              

                               
          
      
    );
  }
}

export default App;

import React, { Component } from 'react';

import { Link } from "react-router-dom";
class Product 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 (
            
            


                我是商品组件

                 

                    {

                        this.state.list.map((value,key)=>{

                            return (
                                
                                   
                                    {value.title}
                                
                            )
                        })
                    }
                    
                
            
        );
    }
}

export default Product;

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 (
            
            


                我是新闻组件

                

                    {

                        this.state.list.map((value,key)=>{

                            return (
                                
                                   
                                    {value.title}
                                
                            )
                        })
                    }
                    
                
            
        );
    }
}

export default News;

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 (
            
            


                我是新闻详情组件
            
        );
    }
}

export default Content;

import React, { Component } from 'react';

//url模块来解析url地址    在react里面使用url模块需要安装url模块    cnpm install url --save
import url from 'url';


class ProductContent extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    //生命周期函数
    componentDidMount(){



        // this.props.location.search


        //获取get传值

        console.log(url.parse(this.props.location.search,true));

        var query=url.parse(this.props.location.search,true).query;

        console.log(query)

        

    }
    render() {
        return (
            
            


                我是商品详情组件
            
        );
    }
}

export default ProductContent;