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、复制官网文档根组件里面的内容进行修改 (加载的组件要提前引入) <Router> <Link to="/">首页</Link> <Link to="/news">新闻</Link> <Link to="/product">商品</Link> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> </Router> exact表示严格匹配 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 */ 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 ( <Router> <div> <header className="title"> <Link to="/">首页</Link> <Link to="/news">新闻</Link> <Link to="/product">商品</Link> </header> <br /> <hr /> <br /> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> <Route path="/productcontent" component={ProductContent} /> <Route path="/content/:aid" component={Content} /> </div> </Router> ); } } 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 ( <div> 我是商品组件 <ul> { this.state.list.map((value,key)=>{ return ( <li key={key}> <Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link> </li> ) }) } </ul> </div> ); } } 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 ( <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;
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;
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 ( <div> 我是商品详情组件 </div> ); } } export default ProductContent;
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!