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>
);
}
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>
);
}
1条答案
按热度按时间xcitsw881#
要使用React和Vite重定向到另一个页面,您可以使用react-router-dom库中的useHistory钩子。下面是一个示例:
首先,运行npm install react-router-dom,确保已安装react-router-dom。
然后,从react-router-dom中导入useHistory和Route到您要重定向的组件中:
在你的组件中,你可以使用useHistory钩子来访问history对象,你可以使用它来导航到另一个页面:
在上面的示例中,单击按钮时将调用handleClick函数,该函数使用history.push()方法导航到/another-page路径。
或者,您可以使用Route组件定义要重定向到的路由,并使用history.push()方法触发重定向:
在本例中,Route组件定义了/another-page路由以及访问该路由时要呈现的组件或内容。history.push()方法在handleClick函数中调用以触发重定向。