react默认路由嵌套子路由

import React from 'react'
import { Router, Redirect,Route, IndexRoute,browserHistory,hashHistory } from 'react-router'


import App from '../containers/App'
import Home from '../containers/Home'
import Phone from '../containers/phone/phone'
import Ditu from '../containers/Ditu/Ditu'
import Anli from '../containers/Anli/Anli'
import HomeIndex from '../containers/homeIndex/HomeIndex'
import List from '../containers/List'
import Detail from '../containers/Detail'
import About from '../containers/about/About'
import News from '../containers/news/News'
import Team from '../containers/Team/Team'
import NotFound from '../containers/NotFound'


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


export default RouteMap
总入口路由:
首页 电话 地图 案例
首页子路由: import React from 'react' import { Link,IndexLink } from 'react-router' import { browserHistory } from 'react-router' import Banner from '../../contents/banner/Banner' class HomeIndex extends React.Component { render() { return (
关于我们 家装新闻 案例展示 设计团队
) } } export default HomeIndex home文件: import React from 'react' import { browserHistory } from 'react-router' class Home extends React.Component { render() { return (
{this.props.children}
) } } export default Home 原理就是让home父组件作为一个容器,在其中一个子页面完成跳转 IndexRoute使用这个之后如果想在默认的路由下面嵌套子路由,会发现点击跳转后默认的路由失去了active状态,所以现在不使用这个了。直接利用react的路由重定向,将默认地址指向 需要展示的首页。


 
 

你可能感兴趣的:(web前端开发)