阵营路由器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