reactjs 如何使用react vite重定向到另一个页面?

hivapdat  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(274)

我有一个页面在React称为应用程序。jsx,我想当选择一个navar视图它带我到另一个名为patrocinio. jsx.附加代码,我试图做的,但页面出现全部空白
尝试使用链接到的代码,并安装react-router-doom依赖项。我希望它允许我在页面之间导航

xcitsw88

xcitsw881#

要使用React和Vite重定向到另一个页面,您可以使用react-router-dom库中的useHistory钩子。下面是一个示例:
首先,运行npm install react-router-dom,确保已安装react-router-dom。
然后,从react-router-dom中导入useHistory和Route到您要重定向的组件中:

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

在你的组件中,你可以使用useHistory钩子来访问history对象,你可以使用它来导航到另一个页面:

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push('/another-page');
  }

  return (
    <div>
      <h1>Hello, world!</h1>
      <button onClick={handleClick}>Go to another page</button>
    </div>
  );
}

在上面的示例中,单击按钮时将调用handleClick函数,该函数使用history.push()方法导航到/another-page路径。
或者,您可以使用Route组件定义要重定向到的路由,并使用history.push()方法触发重定向:

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push('/another-page');
  }

  return (
    <div>
      <h1>Hello, world!</h1>
      <button onClick={handleClick}>Go to another page</button>
      <Route path="/another-page">
        {/* Render the component or content for the other page here */}
      </Route>
    </div>
  );
}

在本例中,Route组件定义了/another-page路由以及访问该路由时要呈现的组件或内容。history.push()方法在handleClick函数中调用以触发重定向。

相关问题