当前位置：首页 > React

如何理解react路由

2026-01-24 01:20:36React

React路由的基本概念

React路由用于管理单页应用（SPA）中的页面导航，通过动态切换组件实现无刷新跳转。核心库包括react-router-dom（用于Web应用）和react-router-native（用于React Native）。路由通过URL与组件映射关系控制页面渲染。

核心组件与功能

1. BrowserRouter与HashRouter

BrowserRouter基于HTML5的history API，URL形式为/path，需服务器配置支持。
HashRouter使用URL的哈希部分（#），兼容性更好，URL形式为/#/path。

2. Route组件
定义路径与组件的映射关系，常用属性：

如何理解react路由

path：匹配的URL路径。
component/render/children：指定渲染的组件或函数。
exact：精确匹配路径。

<Route path="/home" component={Home} exact />

3. Link与NavLink

Link：生成导航链接，避免页面刷新。
NavLink：可添加激活状态的样式（如activeClassName）。

<Link to="/about">About</Link>
<NavLink to="/contact" activeClassName="active">Contact</NavLink>

动态路由与参数传递

通过useParams或match对象获取URL参数：

如何理解react路由

<Route path="/user/:id" component={UserDetail} />

// 在组件中获取参数
import { useParams } from 'react-router-dom';
function UserDetail() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

编程式导航

使用useHistory或useNavigate（v6+）实现代码跳转：

import { useHistory } from 'react-router-dom';
function Button() {
  const history = useHistory();
  return <button onClick={() => history.push('/dashboard')}>跳转</button>;
}

路由守卫与重定向

1. Redirect组件
无条件重定向到指定路径：

<Redirect to="/login" />

2. 私有路由实现
通过高阶组件或自定义逻辑控制访问权限：

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = checkAuth();
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

React Router v6的更新

使用Routes替代Switch，匹配规则更严格。
useNavigate替代useHistory。
嵌套路由简化，通过<Outlet>渲染子路由。

// v6示例
<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>