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

反应路由器v4内页（javascript）

2 个答案: