十四、 React路由（react-router4.x）： 動態路由、get傳值、React中使用url模塊

概述

新聞列表 —跳轉—> 詳情頁 時，想把列表對應的id傳到詳情頁里，可用到三種傳值方法：
1、動態路由傳值
2、get傳值
3、localstorage傳值

一、動態路由傳值

【App.js】主要路由配置都在此處。01所在

import React from 'react';
import './App.css';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; //引入路由模塊
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
import Content from './components/Content';

function App() {
  return (
    <Router>
    <div>           
        <header className="title"> 
          <Link to="/">首頁</Link> | 
          <Link to="/news">新聞</Link> | 
          <Link to="/product">商品</Link> | 
        </header>
         <br /><hr />

        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />    
        <Route path="/product" component={Product} />
        {/* 【01】配置動態路由 （:aid即動態路由意思） 02在News.js */}
        <Route path="/Content/:aid" component={Content} />
    </div>
</Router>
  );
}
export default App;

【News.js】路由配置02步所在

import React, { Component } from 'react';
import {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'
                },
                {
                    aid:5,
                    title:'新聞列表555'
                },
            ]
        };
    }
    render() {
        return (      
            <div>
                <h1>我是新聞組件</h1>
                <ul>
                    {this.state.list.map((value,key)=>{
                        //【02】動態路由配置，獲取對應值的aid值傳到鏈接里。地址欄會變成類似 localhost:3000/content/1 
                        //（ 01在App.js里。to={``}這兩個類似引號的符號是es6中模板字符串標記）
                        //03在Content.js 
                      return  <li key={key}><Link to={`/Content/${value.aid}`}>{value.title}</Link></li>
                        })
                    }
                </ul>
            </div>
        );
    }
}
export default News;

【Content.js】路由配置03步所在

import React, { Component } from 'react';

class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    //生命周期函數：加載完成調用props
    componentDidMount(){
        //打印出整個傳值內容為：Object isExact:true params:Object aid:"2"
        console.log(this.props)
        //【03】所以獲取aid的值方法為（獲取動態路由傳值）【02】在News.js里
        console.log(this.props.match.params.aid)
    }
    render() {
        return (    
            <div>
                我是新聞詳情組件，當前aid值為：{this.props.match.params.aid}
            </div>
        );
    }
}
export default Content;

【效果】在新聞列表頁點aid=2項：

二、get傳值

get傳值主要特征是地址有個 ?xxx：http://localhost:3000/ProductDetail?aid=1
【App.js】路由配置同路由

import React from 'react';
import './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';

import Product from './components/Product';
import ProductDetail from './components/ProductDetail';

function App() {
  return (
    <Router>
    <div>           
        <header className="title"> 
          <Link to="/">首頁</Link> | 
          <Link to="/news">新聞</Link> | 
          <Link to="/product">商品</Link> | 
        </header>

         <br /><hr />

        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />
        <Route path="/Content/:aid" component={Content} />

        <Route path="/product" component={Product} />
        {/* 【01】get配置 02在Product.js */}
        <Route path="/ProductDetail" component={ProductDetail} />
        
    </div>
</Router>
  );
}
export default App;

【Product.js】

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

class Product 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'
                },
                {
                    aid:5,
                    title:'商品列表555'
                },
            ]
        };
    }
    render() {
        return (    
            <div>
                <h1>我是商品組件</h1>
                <ul>
                    {this.state.list.map((value,key)=>{
                        //【02】get配置：獲取對應值的aid值傳到鏈接里。地址欄會變成類似 localhost:3000/ProductDetail?aid=1 
                        //（ 01在App.js里。to={``}這兩個類似引號的符號是es6中模板字符串標記）
                        //03在ProductDetail.js 
                      return  <li key={key}><Link to={`/ProductDetail?aid=${value.aid}`}>{value.title}</Link></li>
                        })
                    }
                </ul>

            </div>
        );
    }
}
export default Product;

【ProductDetail.js】

import React, { Component } from 'react';

class ProductDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    //生命周期函數：加載完成調用props
    componentDidMount(){
        //打印出整個傳值內容為：
//location:[hash:"",key:"ov4jf0",pathname:"/ProductDetail",search:"?aid=3",state:undefined]
        console.log(this.props)
        //【03】所以獲取aid的值方法為（獲取動態路由傳值）【02】在News.js里
        console.log(this.props.location.search)
    }
    render() {
        return (    
            <div>
    <h1>我是商品詳情組件當前商品aid是：{this.props.location.search}</h1>
            </div>
        );
    }
}
export default ProductDetail;

【效果】：點 [商品列表] 任意一個，會把 [對應的aid] 通過地址欄傳到 [商品詳情頁] 去：
問題：此處需要得到的是 5 這個值，但結果確不同，將在下一節解決

三、React中使用url模塊，解析url

1.安裝url模塊：

cnpm install url --save

2.引入頁面：

import url from 'url'

url解析使用

解決：將解決上一節傳過來的aid值成了：?aid=xx ，直接獲取xx；
【App.js】：代碼同上
【Product.js】：代碼同上
【ProductDetail.js】

import React, { Component } from 'react';

import url from 'url'; //引入url解析模塊

class ProductDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    //生命周期函數：加載完成調用props
    componentDidMount(){
        //打印出整個傳值內容為：
        //location:[hash:"",key:"ov4jf0",pathname:"/ProductDetail",search:"?aid=3",state:undefined]
        //console.log(this.props)
        //【03】所以獲取aid的值方法為（獲取動態路由傳值）【02】在News.js里
        //console.log(this.props.location.search)

        //【url解析01】將返回：query:[aid:x]
        console.log(url.parse(this.props.location.search,true))

        //【url解析02】所以獲取aid值寫法：
        var query=url.parse(this.props.location.search,true).query;
        console.log(query);
    }
    render() {
        return (    
            <div>
    <h1>我是商品詳情組件當前商品</h1>
            </div>
        );
    }
}
export default ProductDetail;

效果：在地址欄隨意傳過來的參數都會進行解析：

自己隨便寫個參數：都可進行解析

三、總結

react動態路由傳值：

  1、動態路由配置
      <Route path="/content/:aid" component={Content} />   
  2、對應的動態路由加載的組件里面獲取傳值
        this.props.match.params
  跳轉：<Link to={`/content/${value.aid}`}>{value.title}</Link>

react get傳值：

  1、獲取 this.props.location.search