是否可以从页面导航到ReactJS中另一页面的导航栏的组件？

Question

我正在构建一个React应用程序。我有一个包含两个元素的主导航栏：主页和报告。 “报告”页面内部有自己的导航栏，其中有一个链接列表，单击该链接时会从rest api获取数据并将其显示在ag-grid中。

在我的主页上有一个链接，单击该链接后，我想直接显示其中一个网格，这是“报告”页面导航栏的一部分。我已经使用路由器指定了路径，并且在我的主页中导入了NavLink并使用它指定了路径。但是，这只是将我带到空白页。好像一旦进入第二页，就无法进入第二个导航栏。

在报告页面中，我创建了一个导航栏（WorkNavbar），并向其元素之一（称为Abc）添加了路径。当您单击Abc时，将显示如下所示的链接列表：玫瑰，白色等。

<Router>
   <div>
   <WorkNavbar/>
   <Route  path="/reports/abc" component={Navbar2}/>
   <Route exact path="/reports/abc/rose" component= {Rose}/>
   <Route exact path="/reports/abc/white" component= {White}/>
   </div>
</Router>

---

在主页中，我添加了如下链接：

<NavLink to="/path2/reports/abc" className="wineslist">Rose List</NavLink>

但是它不起作用。需要我走的最远的是路径2，即报告页面，但似乎无法进入报告导航栏。

我该如何解决？任何帮助或建议将不胜感激！