在react-router-dom5取消了IndexRoute這個默認路由的組件,這樣在最新的react-router-dom5中默認路由便成了必須要解決的問題,不然在某些路由結構複雜的的項目中首頁地址需要類似http://localhost/admin這樣寫法比較不好看雖然功能可以實現。
react-router-dom還有另一個組件Redirect組件
<BrowserRouter>
<ul>
<li>
<Link to="/pageOne">pageOne</Link>
</li>
<li>
<Link to="/pageTwo">pageTwo</Link>
</li>
</ul>
<div>
{/* Switch從上往下匹配直到匹配到爲止 */}
<Switch>
<Route path="/pageOne" render={() =>
<PageOne>
<Route exact path="/pageOne" component={PageOneChildOne}/>
<Route path="/pageOne/PageOneChildTwo" component={PageOneChildTwo}/>
</PageOne>
}/>
<Route path="/pageTwo" render={() =>
<PageTwo>
<Route exact path="/pageTwo" component={PageTwoChildOne}/>
<Route path="/pageTwo/PageOneChildTwo" component={PageTwoChildTwo}/>
</PageTwo>
}/>
<Redirect exact to="/pageOne" from='/' />
<Route path="*" component={Hook}></Route>
</Switch>
</div>
</BrowserRouter>
讓路徑爲‘/’的路由重定向到pageOne這個首頁,這樣就解決了默認路由的問題了