react router @4 和 vue路由 詳解(三)react如何在路由裏面定義一個子路由

完整版：http://www.javashuo.com/article/p-rfhkumuv-be.html

五、react如何在路由裏面定義一個子路由？

 

　　a、引入在須要子路由的頁面引入Route標籤　　

 

　　　<Route path='/noteDetail/home' component={NodeDe} />

　　b、舉個🌰(糖炒栗子，個人愛，爲何我本身作的🌰都那麼難吃？？？)

 

　　　　

 

　　　　咱們在home頁面裏(左邊一溜的父組件)該點擊的地方

export const Home = () => (
  <ul>
    <li>
      <NavLink to='/home' exact activeStyle ={selectedStyle}>首頁</NavLink>
    </li>
    <li>
      <NavLink to='/about' activeStyle ={selectedStyle}>關於咱們</NavLink>
    </li>
    <li>
      <NavLink to='/event' activeStyle ={selectedStyle}>企業事件</NavLink>
    </li>
    <li>
      <NavLink to='/product' activeStyle ={selectedStyle}>公司產品</NavLink>
    </li>
    <li>
      <NavLink to='/us' activeStyle ={selectedStyle}>聯繫咱們</NavLink>
    </li>
  </ul>
)

 　　　　咱們在home頁面裏(左邊一溜的父組件)設置內容應該不一樣的地方

      <Redirect exact from="/" to="/home"></Redirect>
      <Route path='/home' exact component={Home}/>
      <Route path='/about' component={About}/>
      <Route path='/event' component={Event}/>
      <Route path='/product' component={Product}/>    
      <Route path='/us' component={Us}/>    

 

　　　　咱們在關於咱們頁面該點擊的地方

export const AboutMenu = () => (
  <ul className="about-menu">
    <li>
      <NavLink to='/about' exact activeStyle ={selectedStyle}>公司簡介</NavLink>
    </li>
    <li>
      <NavLink to='/about/history' activeStyle ={selectedStyle}>公司歷史</NavLink>
    </li>
    <li>
      <NavLink to='/about/services' activeStyle ={selectedStyle}>公司服務</NavLink>
    </li>
    <li>
      <NavLink to='/about/location' activeStyle ={selectedStyle}>企業位置</NavLink>
    </li>
  </ul>
)

　　　　咱們在關於咱們頁面該實現內容不一樣的地方

      <Route path='/about' exact component={Company}/>
      <Route path='/about/history' component={History}/>
      <Route path='/about/services' component={Services}/>
      <Route path='/about/location' component={Location}/>

 

　　　　由此便實現了react子路由