react路由的配置

/*

  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';


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;