react-router 侧边栏

1.react-router 官网地址 reacttraining.cn

2.代码如下：

（第一种实现方式）

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

class SlideBar1 extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            
                

                    

                        

                            
Home
                            
About
                            
Theme
                        
                         
Home
 } />
                         
About
 } />
                         
Theme
} />
                    
                    

                         
Home
 } />
                         
About
 } />
                         
Theme
} />
                    
                
            
        )
    }
}

export default SlideBar1;

上面的代码还可以简化，简化之后功能有所改变

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

const Theme = ({ match })=> (
    

        { match.params.id }
    
)

class SlideBar1 extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            
                

                    

                        

                            
Home
                            
About
                            
Theme
                        
                        
                    
                    

                        
                    
                
            
        )
    }
}

export default SlideBar1;