React+Flent ui组件实现点击导航栏跳转路由地址变化导航栏固定

Question

我编写了一个React项目+Fluent ui组件,点击导航栏进行页面的跳转并且导航栏固定不变,但是好像没有效果显示
以下是代码:

funcation FluentNav(){
 links: [
          {
            key: 'tablelist',
            name: '表清单',
            url: '/pages',
            iconProps: {
              iconName: 'table',
              style: {
                verticalAlign: 'middle',
              },
            },
            // 将链接改为Link组件
            // to属性指定目标路径
            as: Link, // 这里使用冒号而不是等号
            to: '/pages', // 这里使用冒号而不是等号
            onClick: (ev, item) => {
              ev.preventDefault();
              window.history.pushState(null, '', item.to);
              window.dispatchEvent(new PopStateEvent('popstate')); // 触发PopStateEvent事件
            },
          },
];
 return (
          <div className="App">
            <header className="App-header">
              <Nav
                selectedKey="key3"
                ariaLabel="Nav basic example"
                styles={navStyles}
                groups={navLinkGroups}
              />
            </header>
        </div>
          );

}
export default FluentNav

App.js文件:
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import FluentNav from './nav-gat/FluentNav';
import TableInfo from './pages/TableInfo';
function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" element={<FluentNav />} />
          <Route path="/pages" element={<TableInfo />} />
        </Routes>
      </Router>
    </div>
  );
}
export default App;

跳转实现了但是导航栏没有固定，以上代码可运行为完整的

Answer 1

我项目目录结构如下: