我正在开发一个 React 应用程序,并尝试使用
react-router-dom
v6 实现编程式导航。我想根据用户交互(例如按钮单击或表单提交)导航到不同的路线。但是,我无法理解如何正确使用 useNavigate
钩子来实现此目的。
这是我的代码的简化版本:
import React from 'react';
import { useNavigate } from 'react-router-dom';
function NavigationExample() {
const navigate = useNavigate();
const handleButtonClick = () => {
navigate('/about');
};
return (
<div>
<h1>Home Page</h1>
<button onClick={handleButtonClick}>Go to About Page</button>
</div>
);
}
export default NavigationExample;
我不确定这是否是使用
react-router-dom
v6 进行编程导航的正确方法。我应该注意哪些最佳实践或常见陷阱?任何关于如何正确使用 useNavigate
进行程序化导航的指导将不胜感激。
我正在开发一个 React 应用程序,并尝试使用
react-router-dom
v6 实现编程式导航。我尝试使用 useNavigate
钩子根据用户交互(例如按钮单击或表单提交)导航到不同的路线。
这是我尝试过的代码片段:
import React from 'react';
import { useNavigate } from 'react-router-dom';
function NavigationExample() {
const navigate = useNavigate();
const handleButtonClick = () => {
navigate('/about');
};
return (
<div>
<h1>Home Page</h1>
<button onClick={handleButtonClick}>Go to About Page</button>
</div>
);
}
export default NavigationExample;
我预计单击该按钮将导航到“/about”路线,但是当我单击该按钮时没有任何反应。看起来
useNavigate
钩子没有按预期工作。使用 react-router-dom
v6 进行编程导航是否需要考虑任何其他步骤或配置?
根据您提供的代码,您使用 useNavigate 挂钩的方式没有任何问题。该问题可能来自于基于React Router文档的React应用程序的路由器配置:https://reactrouter.com/en/main/routers/picking-a-router
首先,如果所有人都必须在入口文件中配置全局路由器提供商,一般为 app.js 或 app .ts
import { RouterProvider } from "react-router-dom";
import router from "./routes/routes";
export default const App = () => {
<RouterProvider router={router} />
}
然后在route.ts中你必须创建一个新的浏览器路由器
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/about",
element: <About />,
},
]);
export default router;