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、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）


         

                首页

                新闻

                商品


               
                   
                  
         


         exact表示严格匹配


react动态路由传值

      1、动态路由配置

             

      2、对应的动态路由加载的组件里面获取传值

            this.props.match.params

      跳转：{value.title}

react get传值  

      1、获取 this.props.location.search
         
*/

import React, { Component } from 'react';

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

import Home from './components/Home';

import User from './components/User';

import Shop from './components/Shop';

import './assets/css/index.css'

class App extends Component {

  render() {
    return (

      
        



          


             首页组件

             用户页面


               商户

          

             
           
           

           
        
        
         
        
      
    );
  }
}

export default App;

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

import ShopAdd from './Shop/ShopAdd';
import ShopList from './Shop/ShopList';

class Shop extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个商户组件'
         };
    }    
    render() {
        return (
            

               



                


                    商户列表

                    

                    


                    增加商户


                

                


                        
                        this.props.match.url}/`} component={ShopList} />

                        this.props.match.url}/add`} component={ShopAdd} />

                


                


            
        );
    }
}

export default Shop;

import React, { Component } from 'react';

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


import Info from './User/Info';
import Main from './User/Main';

class User extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个User组件'
         };
    }    
    render() {
        return (
            

               

               



                   


                        个人中心

                        

                        


                        用户信息


                    

                    


                            
                            

                            

                    


               


            
        );
    }
}

export default User;