核心组件

一、 <BrowserRouter /> （路由组件）

基于 HTML5 History API （ history.pushState ） 的路由容器，监听 URL 变换并同步组件 (UI ) 状态。

• 不同于 <HashRouter> ，该组件显示的路由不会在 URL 中，适合生产环境
• 用其包裹整个应用的根组件，作为路由系统的入口
• 如果部署在非根目录的服务器上，可能西药服务器配置以支持 <BrowserRouter> （确保所有的请求返回 index.html ）

import { BrowserRouter } from 'react-router';

function App() {
  return (
    <BrowserRouter basename="dobetter">
      {/** 基础路径（可选），如部署在子目录 */}
      {/** 其他路由组件 */}
    </BrowserRouter>
  );
}

1.关键属性

• basename ：设置所有路由的基础路径（如 /my-app ，则 /home 对应的实际路径 /my-app/home ）

二、 <Router> （路由匹配规则）

定义 URL 路径与组件的映射关系，根据当前 URL 匹配路径并渲染对应组件。

• 在 React Router 6 中使用 element 代替 React Router 5 中的 component/render，直接传入 JSX 元素
• 必须包裹在 <Routers> 组件中 （ React Router 5 中必须包裹在 <Switch> 中 ）

import { Router } from 'react-router';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Routes>
      {/** 精确匹配 /home ，渲染 Home 组件 */}
      <Route path="/home" element={<Home />} />
      {/** 匹配 /about 及其子路径（如  /about/team ），渲染 About 组件 */}
      <Route path="/about" element={<About />} />
      {/** 动态路由：匹配 /user/123 ， userId 为 “123” */}
      <Route path="/user/:userId" element={<UserProfile />} />

      {/** 404 页面 ： 匹配所有未定义的路径 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

1. 关键属性

• path ： URL 匹配规则（支持动态参数 :param 、 通配符 * ）
• element ： 匹配时渲染的 React 元素 （必须是 JSX ，如 <Home /> ）
• index ： 标记为父路由的默认子路由（无需 path ，当父路径匹配时渲染）

三、 <Link> （导航链接）

替代原生 <a> 标签，实现无刷新页面跳转（通过修改 URL 而非重新加载）

function Navbar() {
  return (
    <nav>
      {/** 基础用法：跳转到 /home */}
      <Link to="/home">首页</Link>

      {/** 传递状态（通过 `location.state` ） */}
      <Link
        to="/user/earthnut"
        state={{
          from: 'navbar',
        }}
      >
        用户： earthnut
      </Link>
      {/**  替代当前历史记录（而非添加） */}
      <Link to="/about" replace>
        我
      </Link>
      {/** 激活状态（需结合 activeClassName 或自定义逻辑） */}
      <Link
        to="/about"
        className={({ isActive }) => (isActive ? 'active-link' : '')}
      >
        激活高亮版关于
      </Link>
    </nav>
  );
}

1. 关键属性

• to ： 目标路径。字符串或对象格式，如 {pathname: '/user', search: '?id=1'}
• replace ： 布尔值。是够替代当前历史记录（默认为添加）
• state ：传递自定义数据。通过 useLocation().state 获取

四、 <Routes> （路由集合， React Router 6 中替代 <Switch> ）

包裹多个 <Route> 组件，优化匹配逻辑（仅渲染第一个匹配的路由）。

• 相比 React Router 5 的 <Switch /> ， <Routes> 支持 相对路径 (基于父路由的 path )
• 匹配的效率更高。基于路由配置的顺序，优先精确匹配

嵌套路由

// UsersLayout.jsx
import { Outlet } from 'react-router';

function UsersLayout() {
  return (
    <div>
      <h2>用户中心</h2>
      {/** 子路由将在这里渲染 */}
      <Outlet />
    </div>
  );
}