我正在try 创建一个Reaction网络应用程序,我有一个导航栏. 实际上,它运行得很好.但每次导航时它都会重新加载. 当我们使用导航栏导航时,我不希望页面重新加载.

这是我的导航栏.

<MDBNavbarNav fullWidth={false} className="mb-2 mb-lg-0">
  <MDBNavbarLink active aria-current="page" href="/" className="pe-5">
    Home
  </MDBNavbarLink>
  <MDBNavbarLink active href="/#" className="pe-5">
    Features
  </MDBNavbarLink>
  <MDBNavbarLink active href="#" className="pe-3">
    Contact Us
  </MDBNavbarLink>
</MDBNavbarNav>

我的路由是

<div className="App">
  <Router>
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/features" element={<Features />}></Route>
      <Route path="*" element={<PageNotFound />}></Route>
    </Routes>
  </Router>
</div>

我在这里要做什么?

推荐答案

You are using some links that are usually used for external navigation I guess. For internal navigation, you should use the Link component, from react-router: https://reactrouter.com/en/main/components/link
It should look like this:

<Link to={`/features`}>Features</Link>

Reactjs相关问答推荐

NextJs Form不允许我输入任何输入,

在Reaction常量函数中未更新状态变量

为什么查询错误在处理后仍出现在控制台中?RTK查询+ React

使用自动播放的视频组件呈现登录页面时出现JEST测试错误

无法在REACTION TANSTACK查询中传递参数

使用Ionic 7和React 18,如何访问历史对象以在页面之间导航?

我在Route组件上使用元素属性,这样就不需要ID了吗?

Next.js `getLayout` 函数没有被调用

从 redux 调用UPDATE_DATA操作时状态变得未定义

Next.js 和理智 | npm run build 时预渲染页面/时发生错误

如何在Next.js应用程序中为路由[slug]生成.html文件?

在遵循 react-navigation 的官方文档时收到警告消息

为什么我会收到此错误:无法在我的react 包上读取 null 的属性(读取useState)?

如何在 Next Js 13 App Router 中添加 Favicon 图标?

ReactJS 动态禁用按钮

需要在窗口调整大小时更新 React 组件

React Native - 身份验证 - 触发值以更改 Auth 和 UnAuth 堆栈导航器

为什么这两个 div 的渲染方式不同?

如何从另一个切片中的不同切片获取状态并对其进行处理?

根据计算 ReactJs 更新输入字段