使用React-Router遇到的那些坑

1.react-router版本升級很快，第一個路由demo就遇到了坑。

　　react-router版本升級很快，目前為止已經升級到了react-router4。由於才剛開始接觸react的路由，一搜react-router路由就搜到了react-router3文檔，按照文檔demo在自己搭建的react項目上始終是跑不起來，后來終於是發現react-router版本是4以上，原來是react-router沒對上號。

2.是用BrowserRouter還是HashRouter。

　 react-router4的文檔用的是BrowserRouter，照着文檔的demo寫，發現第一次路由過去的路徑能正常顯示，再刷新頁面就發現說找不到路徑了，這就納悶了，不知道哪里出了問題。后來得知BroswerRouter是需要服務端配合的，服務端重定向到首頁，BrowserRouter是基於html5的pushState和replaceState的，很多瀏覽器不支持，存在兼容性問題。故最后選擇HashRouter.

3.react-router的最外層路由只能有一個子元素

 路由結構定義如下：

<Router>
    <ul>
        <li><Link to="/" >Home</Link></li>
        <li><Link to="/detail/1" >Detail</Link></li>
    </ul>
    <Route exact path="/" component={Home}></Route>
    <Route path="/detail/:id" component={Detail}></Route>
</Router>

會報如下錯誤：

報錯是說<Router>只允許有一個子節點，故需要包一層div，如下

    <Router>
        <div>
            <ul>
                <li><Link to="/" >Home</Link></li>
                <li><Link to="/detail/1" >Detail</Link></li>
            </ul>
            <Route exact path="/" component={Home}></Route>
            <Route path="/detail/:id" component={Detail}></Route>
        </div>
    </Router>