相关文章

npm i react-router-dom -S

配置webpack，划重点，如果直接在浏览器地址里输入路径，这个是必须要配置的

devServer:{        historyApiFallback:true    }

先写两个组件备用，非常简单的两个组件

class R1 extends React.Component{    render(){        return 
    
     1
    
    }}class R2 extends React.Component{    render(){        return 
    
     2
    
    }}

引入BrowserRouter和Route，这两个目前就够用了

import { Route, BrowserRouter } from 'react-router-dom';

创建路由并渲染

class Rts extends React.Component{    render(){        return  
    
                       
                              
      
                            
                                   
                               
      
                       
                                                              
    
    }}const render = () => {    ReactDOM.render(          
     ,        document.querySelector('#app')    )}render();

打开浏览器默认就是1，然后在浏览器的地址输入 yourServer/r2，就可以看到页面上显示2了

使用Link:

import { Route, BrowserRouter, Link } from 'react-router-dom';

使用Link创建一个组件

class RLink extends React.Component{    render(){        return 
    
            
     
      显示1
            
     
      显示2
                     
    
    }}

修改Rts组件，注意标签嵌套层级

class Rts extends React.Component{    render(){        return  
    
                                          
                                                                              
      
                            
                                   
                                   
                               
      
                       
                                                              
    
    }}

这样就好了，实际效果如图