React路由配置

                                              React路由

1、React路由安装

react-router-dom配置路由。react-router-dom更新了dom类操作的组件，Link和BrowserRouter

2、React路由跳转页面

2.1根目录

import React from 'react'
import About from './About'
import News from './News'
import Home from './Home'
import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
class App extends React.Component{    
render(){        
return(
// 根容器            
<HashRouter>            
<div>            
<p>这是根目录</p>
//链接             
<Link to="/Home">首页</Link>&nbsp;            
<Link to="/News">新闻</Link>&nbsp;            
<Link to="/About">关于我们</Link>&nbsp;
//路由规则，Route是配置路由的规则，同时也是一个占位符            
<Route path="/Home" component={Home}></Route>            
<Route path="/News" component={News}></Route>            
<Route path="/About" component={About}></Route>            
</div>           
 </HashRouter>        
 )    
 }}
 export default App

2.2配置三个一级路由

import React from 'react'
class Home extends React.Component{    
render(){       
 return(            
 <div>首页</div>      
   )    
   }}
   export default Home;

import React from 'react'
class About extends React.Component{   
 render(){        
 return(           
  <div>111</div>       
   )   
  }}
    export default About

import React from 'react';
class Shehui extends React.Component{   
 render(){        
 return(            
 <div>社会新闻</div>        
 )    
 }}
 export default Shehui

2.3配置一个二级路由

import React from 'react'
import { Link,Route} from 'react-router-dom';
import Shehui from './news/Shehui';
class News extends React.Component{       
 render(){        
 return(            
 <div>               
  新闻               
 <ul>                
  <li>               
   <Link to="/news/Shehui">社会新闻</Link>                
  </li>              
  <li>               
   <Link to="/news/Shehui">国际新闻</Link>                
  </li>               
  <li>               
    <Link to="/news/Shehui">娱乐新闻</Link>               
  </li>               
</ul>               
 <Route path="/news/Shehui" component={Shehui}></Route>            
</div>        
     )    
  }}
  export default News

效果展示：