如何使用react-router-dom v6执行编程导航?

问题描述 投票:0回答:1

我正在开发一个 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 进行编程导航是否需要考虑任何其他步骤或配置?

reactjs react-hooks react-router-dom hook react-router-v4
1个回答
0
投票

根据您提供的代码,您使用 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;
© www.soinside.com 2019 - 2024. All rights reserved.