React Router (V6) Link 在没有服务器请求的情况下工作，但 useNavigate 没有答案

【问题标题】：React Router (V6) Link works without a server request but useNavigate doesn'tReact Router (V6) Link 在没有服务器请求的情况下工作，但 useNavigate 没有
【发布时间】：2022-01-20 13:38:25
【问题描述】：

我一直在结合使用“react-router-dom”（v6）和Microsoft Fluint UI Nav。因此，我必须以编程方式导航，而不是使用 <Link></Link> 元素。

当我使用<Link to="test">to test</Link> 时，它会在没有服务器请求的情况下导航到请求的页面。但是当我使用它时（基本上是一个调用navigate 进行重定向的事件处理程序）：

import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  const navLinkGroups: INavLinkGroup[] = [
    {
      links: [{ name: 'test', url: 'test', onClick: () => navigate('test') }],
    },
  ];

return (
     <Stack><Nav groups={navLinkGroups} isOnTop={true} /></Stack>
  );

进入“测试”页面时，它会发出一个服务器请求。这是设计使然还是我遗漏了什么？

更新

你可以这样复制它：

创建项目：npx create-react-app my-app --template @fluentui/cra-template
像这样编辑 App.tsx：

import { BrowserRouter, Route, Routes } from 'react-router-dom';

//UI-Components import
import { Header } from './UI-Components/Header';
// Page Import
import { TestPage } from './Pages/Test';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="test" element={<TestPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

创建 Headers.tsx（UI-Components 文件夹）
添加 Header.tsx 内容：

import { Stack } from '@fluentui/react/lib/Stack';
import { Nav, INavLinkGroup, INavProps } from '@fluentui/react/lib/Nav';
import { useNavigate } from 'react-router-dom';

import { Link } from 'react-router-dom';

export const Header = () => {
  const navigate = useNavigate();
  const navLinkGroups: INavLinkGroup[] = [
    {
      links: [{ name: 'test', url: 'test', onClick: () => navigate('test') }],
    },
  ];
  return (
    <Stack>
      <Stack><Nav groups={navLinkGroups} isOnTop={true} /></Stack>
      <Stack></Stack>
      <Link to="test">to test</Link>
      <Stack></Stack>
      <Stack></Stack>
    </Stack>
  );
};

在Pages文件夹中创建Test.tsx
添加内容export const TestPage = () => <div>test</div>;
现在您应该可以重现问题了

【问题讨论】：

您能否更新您的问题以包含更完整和全面的代码示例？ stackoverflow.com/help/minimal-reproducible-example
您使用的是哪种类型的路由器？（哈希路由器，浏览器路由器）
另外我认为它需要一个前导斜线，至少看看 v6 “什么是新的”东西，比如navigate('/test')
@Nikki9696 这取决于。 RRDv6 可以使用相对或绝对路由/链接。领先的"/" 就是区别。

标签： reactjs react-hooks react-router-dom

【解决方案1】：

菜鸟错误... 我忘了preventDefault()。像这样修复它：


  function handleNavClick(event?: React.MouseEvent<HTMLElement>, element?: INavLink) {
    if (event && element) {
      event.preventDefault();
      navigate(element.url);
    }
  }

  const navLinkGroups: INavLinkGroup[] = [
    {
      links: [{ name: 'test', url: 'test', onClick: (event, element) => handleNavClick(event, element) }],
    },
  ];

【讨论】：