React router v4 内页(javascript)

Question

尝试这样做

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

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

单击时我不移动到 AddWork 页面，只停留在 Work 和 link changes

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 分量将是 return，因为 /oa/work/addwork 包含 /oa/work。如果你设置 exact = true:

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

如果位置完全匹配，它将 return 组件。在您的情况下，位置是 /oa/work/addwork，它将 return AddWork

React router v4 内页(javascript)

React router v4 inner page (javascript)

javascript

reactjs

react-router

react-router-v4