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 HomeIndex
home檔案：
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的路由重定向，將預設地址指向
需要展示的首頁。