react的路由跳转navigation

实现 React 中的路由跳转
在 React 应用程序中实现路由跳转通常依赖于 react-router-dom 这样的库。此库提供了声明式的路由配置方式，使得页面之间的导航变得简单而直观。
对于基于函数组件的应用来说，可以利用 hooks 来简化逻辑处理：
安装 react-router-dom
首先需要安装 react-router-dom 包：
npm install react-router-dom
登录后复制
基本设置
接着，在应用入口处包裹 <BrowserRouter> 或者 <HashRouter> 组件来启用历史记录管理功能，并定义各个路径对应的视图组件。
import { BrowserRouter as Router, Route } from 'react-router-dom';
// ...
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
登录后复制
使用 Link 和 Navigate 组件进行内部链接创建与编程式导航
为了构建可点击的超链接，应该使用内置的 Link 组件；如果想要执行编程性的页面切换，则可以通过调用 useNavigate() hook 获取到 navigate 函数并传入目标 URL 地址完成操作。
import { Link, useNavigate } from "react-router-dom";

function App() {
const navigate = useNavigate();

function handleClick() {
navigate('/about');
}

return (
<>
{/* Using Link */}
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About Us</Link></li>
</ul>
</nav>

{/* Programmatic Navigation Example */}
<button onClick={handleClick}>Go To About Page</button>
</>
);
}
登录后复制
新的 react-navigation API 正朝着动态化发展[^1]，这同样适用于 Web 平台上的 React 路由解决方案。通过采用更灵活的方式定义和修改路由结构，开发者能够提供更加流畅且个性化的用户体验。