我创建了一个使用React Router 6的React 18应用程序

<body class="h-full">
<div id="root"></div>
<script src="/src/main.tsx"
        type="module"></script>
</body>
</html>

main.tsx:

const container = document.getElementById('root')
const root = createRoot(container)

root.render(
  <React.StrictMode>
    <BrowserRouter basename={'/'}>
      <Routes>
        <Route path="/" element={<Shell />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
)

shell.tsx:

export const Shell = () => {
  return (
    <div className="flex min-h-full flex-col">
      <header className="shrink-0 bg-gray-900">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
          <img
            className="h-8 w-auto"
            src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
            alt="Your Company"
          />
          <div className="flex items-center gap-x-8">
            <button
              type="button"
              className="-m-2.5 p-2.5 text-gray-400 hover:text-gray-300"
            >
              <span className="sr-only">View notifications</span>
              <svg
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
                />
              </svg>
            </button>
            <a href="#" className="-m-1.5 p-1.5">
              <span className="sr-only">Your profile</span>
              <img
                className="h-8 w-8 rounded-full bg-gray-800"
                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt=""
              />
            </a>
          </div>
        </div>
      </header>

      {/*3 column wrapper */}
      <div className="mx-auto w-full max-w-7xl grow lg:flex xl:px-2">
        {/*Left sidebar & main wrapper*/}
        <div className="flex-1 xl:flex">
          <div className="border-b border-gray-200 px-4 py-6 sm:px-6 lg:pl-8 xl:w-64 xl:shrink-0 xl:border-b-0 xl:border-r xl:pl-6">
            <Menu></Menu>
          </div>

          <div className="px-4 py-6 sm:px-6 lg:pl-8 xl:flex-1 xl:pl-6">
            {/*Main area */}
          </div>
        </div>

        <div className="shrink-0 border-t border-gray-200 px-4 py-6 sm:px-6 lg:w-96 lg:border-l lg:border-t-0 lg:pr-8 xl:pr-6">
          {/*Right column area */}
        </div>
      </div>
    </div>
  )
}

menu.tsx:

export const Menu = () => {
  return (
    <div>
      {navigation.map((item) => (
        <a
          key={item.name}
          href={item.href}
          className="text-gray-600 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
        >
          {item.name}
        </a>
      ))}
    </div>
  )
}

当单击Dashboard菜单项时，应用程序会往返于后端，从而重新加载整个应用程序，这会导致 Flink 效果。
我做错了什么？
可以找到带repro的回购here

2条答案

按热度按时间

iqih9akk1#

Menu组件正在呈现原始锚标记，它将向服务器请求链接的目标，例如重新加载页面。使用从react-router-dom导出的Link组件来“拦截”导航操作，并完全在客户端处理所有内部应用程序路由/导航。
示例：

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

export const Menu = () => {
  return (
    <div>
      {navigation.map((item) => (
        <Link
          key={item.name}
          to={item.href} // <-- internal paths in the App
          className="text-gray-600 .... font-medium"
        >
          {item.name}
        </Link>
      ))}
    </div>
  );
};

赞(0）回复(0）举报 2023-06-29

ehxuflar2#

您应该使用<Link>标记而不是<a>标记。
<a>标签包含刷新整个页面的属性，但如果您使用react-router-dom库提供的<Link>标签，您的页面将不会刷新并重定向到 Jmeter 板。
<Link>标签参考：Reference

reactjs React Router 6 Flickr on React 18 App中的链接点击

2条答案

相关问题

热门标签

最新问答