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 (             <Router history={browserHistory}>                <Redirect from="/" to="/HomeIndex" />                <Route path='/' component={App}>                    <Route path='/HomeIndex' component={Home}>                        <IndexRoute component={HomeIndex}/>                        <Route path='/Home/About' component={About}/>                        <Route path='/Home/News' component={News}/>                        <Route path='/Home/Team' component={Team}/>                    </Route>                    <Route path='/list' component={List}/>                    <Route path='/Phone' component={Phone}>                    </Route>                    <Route path='/Ditu' component={Ditu}/>                    <Route path='/Anli' component={Anli}/>                    <Route path='/detail/:id' component={Detail}/>                    <Route path="*" component={NotFound}/>                </Route>            </Router>        )    }}export default RouteMap總入口路由：<div className="footer borderTop">            <Link to="/HomeIndex" activeClassName="routerActive" className="footerRouter">            <span className="bar1"></span>            首頁            </Link>            <Link to="/Phone"  activeClassName="routerActive" className="footerRouter">            <span className="bar2"></span>            電話            </Link>            <Link to="/Ditu"  activeClassName="routerActive" className="footerRouter">            <span className="bar3"></span>            地圖            </Link>            <Link to="/Anli"  activeClassName="routerActive" className="footerRouter">            <span className="bar4"></span>            案例            </Link>            </div>首頁子路由：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 (            <div className="content">                <Banner/>                <div className="navUl">            <Link to="/Home/About" className="navList">            <span className="bar1"></span>            關於我們            </Link>            <Link to="/Home/News" className="navList">            <span className="bar2"></span>            家裝新聞            </Link>            <Link to="/Anli" className="navList">            <span className="bar3"></span>            案例展示            </Link>            <Link to="/Home/Team" className="navList">            <span className="bar4"></span>            設計團隊            </Link>            </div>            </div>        )    }}export default HomeIndexhome檔案：import React from 'react'import { browserHistory } from 'react-router'class Home extends React.Component {    render() {        return (            <div>                {this.props.children}            </div>        )    }}export default Home原理就是讓home父組件作為一個容器，在其中一個子頁面完成跳轉IndexRoute使用這個之後如果想在預設的路由下面嵌套子路由，會發現點擊跳轉後預設的路由失去了active狀態，所以現在不使用這個了。直接利用react的路由重新導向，將預設地址指向需要展示的首頁。