15 React路由 动态路由以及get传值 React中使用url模块

概述

新闻列表 —跳转—> 详情页 时，想把列表对应的id传到详情页里，可用到三种传值方法：

1、get传值
2、动态路由
3、localstorage

一、动态路由传值

App.js

import React from "react";

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

import Header from "./components/Header.js";
import Home from "./components/Home.js";
import News from "./components/News.js";
import Product from "./components/Product.js";
import Content from "./components/Content.js";

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

  render() {
    return (
      <Router>
        <div className="App">
          <Header></Header>
          <br /> <br />
          <hr /> <br /> <br />
          <Route path="/" exact component={Home}></Route>
          <Route path="/news" component={News}></Route>
          <Route path="/product" component={Product}></Route>
          <Route path="/content/:aid" component={Content}></Route>
          
        </div>
      </Router>
    );
  }
}

export default App;

News.js

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, 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'
        },
      ]
    };
  }


  render() {
    return (
      <div>
        我是一个news组件的内容 
        <br/><br/><hr/><br/><br/>

        <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 = {};
  }

  //生命周期函数:加载完成调用props
  componentDidMount() {
          
    console.log(this.props);

    //获取动态路由的传值
    console.log(this.props.match.params.aid);
  }

  render() {
    return <div>我是新闻详情组件</div>;
  }
}

export default Content;

二、get传值

get传值主要特征是地址有个 ?xxx http://localhost:3000/ProductDetail?aid=1

App.js

import React from "react";

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

import Header from "./components/Header.js";
import Home from "./components/Home.js";
import News from "./components/News.js";
import Product from "./components/Product.js";
import Content from "./components/Content.js";
import ProductContent from "./components/ProductContent.js";

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

  render() {
    return (
      <Router>
        <div className="App">
          <Header></Header>
          <br /> <br />
          <hr /> <br /> <br />
          <Route path="/" exact component={Home}></Route>
          <Route path="/news" component={News}></Route>
          <Route path="/product" component={Product}></Route>
          <Route path="/content/:aid" component={Content}></Route>
          <Route path="/productdetail" component={ProductContent}></Route>
        </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",
        },
      ],
    };
  }
  render() {
    return (
      <div>
        我是商品组件
        <br/><br/><hr/><br/><br/>
        <ul>
          {this.state.list.map((value, key) => {
            return (
              <li key={key}>
                <Link to={`/productdetail?aid=${value.aid}`}>{value.title}</Link>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Product;

ProductContent.js

import React, { Component } from "react";


class ProductContent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  //生命周期函数:加载完成调用props
  componentDidMount() {
    console.log(this.props);

    //获取ge传值  
    console.log(this.props.location.search);//?aid=4

  }
  render() {
    return (<div>我是商品详情组件</div>);
  }
}

export default ProductContent;

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

1.安装url模块：

cnpm install url --save

2.引入页面：

import url from 'url'

3.使用

ProductContent.js

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 = {};
  }

  //生命周期函数:加载完成调用props
  componentDidMount() {
    console.log(this.props);

    //获取ge传值  
    console.log(this.props.location.search);//?aid=4

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

    var query  =  url.parse(this.props.location.search,true).query;
    console.log(query);//{aid: "1"}

  }

  render() {
    return (<div>我是商品详情组件</div>);
  }
}

export default ProductContent;

四、总结

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

最后

以上就是文静期待为你收集整理的15 React路由 动态路由以及get传值 React中使用url模块的全部内容，希望文章能够帮你解决15 React路由 动态路由以及get传值 React中使用url模块所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。