App.js

/*
  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 logo from './logo.svg';
// import './App.css';
import './assets/css/index.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'
// import ProductContent from './components/ProductContent'
import Pcontent from './components/Pcontent'
class App extends Component {
  render () {
    return (
      <Router>
        <div>
          {/* link路由跳轉 */}
          <Link to="/">首頁</Link>
          {/* <Link to="/news">新聞</Link> */}
          {/* <Link to="/product">商品</Link> */}
          <Link to="/pcontent">商品</Link>
          {/* <Link to="/productcontent">商品詳情</Link> */}
          <Route exact path="/" component={Home} />
          {/* <Route path="/news" component={News} /> */}
          {/* <Route path="/product" component={Product} /> */}
          <Route path="/pcontent/:id" component={Pcontent} />
          {/* <Route path="/productcontent" component={ProductContent} /> */}
          {/* 配置動態路由 */}
          {/* <Route path="/content/:aid" component={Content} /> */}
        </div>
      </Router >
    )
  }
}
export default App;
 

Home.js

import React from 'react'
import axios from 'axios'
import { Link } from "react-router-dom"
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '首頁',
      list: [],
      domain: 'http://a.itying.com/'
    };
  }
  requestData = () => {
    var api = this.state.domain + 'api/productlist';
    axios.get(api)
      .then((response) => {
        console.log(response.data.result)
        this.setState({
          list: response.data.result

        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  componentDidMount () {
    this.requestData()
  }
  render () {
    return (
      <div className="home">
        <div className="list">
          {
            this.state.list.map((value, key) => {
              return (
                <div className="item" key={key}>
                  <h3 className="item_cate">{value.title}</h3>
                  <ul className="item_list">
                    {
                      value.list.map((v, k) => {
                        return (
                          <li key={k}>
                            <Link to={`/pcontent/${v._id}`}>
                              <div className="inner">
                                {/* <img src={require('../assets/images/2.jpg')} /> */}
                                <img src={`${this.state.domain}${v.img_url}`} alt={v.title}/>
                                <p className="title">{v.title}</p>
                                <p className="price">{v.price}元</p>
                              </div>
                            </Link>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}

export default Home
 

Pconmtent.js       react解析Html程式碼的方式dangerouslySetInnerHTML

import React from 'react'
import { Link } from "react-router-dom";
const axios = require('axios');
class Pcontent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '產品詳情',
      list: [],
      domain: 'http://a.itying.com/'
    };
  }
  requestData (id) {
    var api = this.state.domain + 'api/productcontent?id=' + id;
    axios.get(api)
      .then((response) => {
        console.log(response.data.result);
        console.log(response.data.result[0])
        this.setState({
          
          list: response.data.result[0]
        })
      })
      .catch(function (error) {
        console.log(error);
      })
  }
  componentWillMount () {
    console.log(this.props.match.params.id)
    let id = this.props.match.params.id;
    this.requestData(id);
  }
  render () {
    return (
      <div className="pcontent">
        <div className="back">  <Link to='/'>返回</Link></div>
        <div className="p_content">
          <div className="p_info">
            <img src={`${this.state.domain}${this.state.list.img_url}`} alt={this.state.list.title}/>
            <h2>{this.state.list.title}</h2>
            <p className="price">{this.state.list.price}/份</p>
          </div>
          <div className="p_detial">
            <h3>
              商品詳情
              </h3>
              {/* 這是react解析Html程式碼的方式dangerouslySetInnerHTML */}
            <div className="p_content" dangerouslySetInnerHTML={{ __html: this.state.list.content }}>
            </div>
          </div>
        </div>
        <footer className="pfooter">
          <div className="cart">
            <strong>數量:</strong>
            <div className="cart_num">
              <div className="input_left">-</div>
              <div className="input_center">
                <input type="text" readOnly="readonly" value="1" name="num" id="num" />
              </div>
              <div className="input_right">+</div>
            </div>
          </div>
          <button className="addcart">加入購物車</button>
        </footer>
      </div>
    );
  }
}

export default Pcontent;