reactjs - 是否可以在 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>

但它不起作用。我最需要的是path2，这是报告页面，但它似乎无法进入报告导航栏。

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

标签： reactjsreact-routerreact-router-dom