陣營路由器V4內頁（JavaScript）的

Question

嘗試這樣做

<Route path="/oa/work" component={Work}> 
<Route path="/oa/work/addwork" component={AddWork}/> 
</Route> 

我的鏈接<Link className="btn-blue-style" to="/oa/work/addwork">Add new Job</Link>

當點擊我不動，以AddWork頁面，僅僅停留在工作和鏈接更改

Answer 1

使用exact確保完整的位置路徑匹配。

<Route exact path="/oa/work" component={Work}> 
<Route exact path="/oa/work/addwork" component={AddWork}/> 

你的路由器應該是這樣的：

<Router> 
     <div> 
      <ul> 
       <li> 
        <Link to="/oa/work">Work</Link> 
       </li> 
       <li> 
        <Link to="/oa/work/addwork">Add Work</Link> 
       </li> 
      </ul> 
      <hr /> 
      <Route exact path="/oa/work" component={Work} /> 
      <Route exact path="/oa/work/addwork" component={AddWork} />  
     </div> 
    </Router> 

Answer 2

沒有什麼是錯在這裏。這就是Router組件（react-router-v4）的工作方式。 在你的代碼，您沒有設置exact：

<Route path="/oa/work" component={Work}> 
<Route path="/oa/work/addwork" component={AddWork}/> 

時位置爲/oa/work/addwork所以當。 Work組件將返回，因爲/oa/work/addwork包含/oa/work。 如果設置exact = true：

<Route exact path="/oa/work" component={Work}> 
<Route exact path="/oa/work/addwork" component={AddWork}/> 

如果定位精確匹配它會返回組件。在你的情況下，位置是/oa/work/addwork，它將返回AddWork