我创建了一个使用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
组件来“拦截”导航操作,并完全在客户端处理所有内部应用程序路由/导航。示例:
ehxuflar2#
您应该使用
<Link>
标记而不是<a>
标记。<a>
标签包含刷新整个页面的属性,但如果您使用react-router-dom
库提供的<Link>
标签,您的页面将不会刷新并重定向到 Jmeter 板。<Link>
标签参考:Reference