ReactRouterDOM详解：构建单页应用的路由指南

    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </div>
</BrowserRouter>

);
}

function Home() {
return

Home

;
}

function About() {
return

About

;
}

function Contact() {
return

Contact

;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
```

在这个示例中：

• BrowserRouter: 包裹整个应用，提供路由上下文。
• Routes: 用于包裹所有 Route 组件，确保一次只有一个路由被渲染。
• Route: 定义 URL 路径与组件之间的映射。path 属性指定 URL 路径，element 属性指定要渲染的组件。
• Link: 创建导航链接，类似于 HTML 的 <a> 标签，但它会阻止页面刷新并使用客户端路由进行导航。

三、核心组件详解

1. BrowserRouter

BrowserRouter 是最常用的路由器组件，它利用 HTML5 历史 API 来实现无刷新的 URL 更改。它适用于大多数现代浏览器，提供流畅的用户体验。

2. Routes 和 Route

Routes 组件用于定义应用的路由结构，它充当 Route 组件的容器。每个 Route 组件都定义了一个 URL 路径和与之关联的组件。

Route 组件的 path 属性支持多种模式匹配方式：

• 精确匹配: /about 只匹配 /about。
• 嵌套路由: /users/profile 可以匹配 /users 和 /users/profile。
• 动态路由参数: /users/:id 可以匹配 /users/123，其中 id 是一个动态参数。
• 通配符: * 可以匹配任何路径。

3. Link 和 NavLink

Link 组件用于创建可点击的链接，导航到应用内的不同路由。它渲染一个 <a> 标签，但会拦截默认的导航行为，并使用 React Router 的内部导航机制。

NavLink 是 Link 的一个特殊版本，它提供了一个 active 类名，当链接对应的路由处于活动状态时，该类名会被自动添加到元素上。这使得我们可以轻松地为当前活动链接添加样式。

javascript
<NavLink to="/about" className={({ isActive }) => isActive ? "active-link" : ""}>About</NavLink>

4. Navigate

Navigate 组件用于以编程方式导航到不同的路由。它通常用于重定向，例如在用户登录后将其重定向到主页。

```javascript
import { Navigate } from 'react-router-dom';

function LoginForm() {
const [isLoggedIn, setIsLoggedIn] = useState(false);

const handleSubmit = () => {
// ... 登录逻辑 ...
setIsLoggedIn(true);
};

if (isLoggedIn) {
return ;
}

return (

);
}
```

5. useNavigate

useNavigate 是一个 React Hook，它允许我们在函数组件中以编程方式进行导航。

```javascript
import { useNavigate } from 'react-router-dom';

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

const handleClick = () => {
navigate('/about');
};

return (
Go to About
);
}
```

6. useParams

useParams 是一个 React Hook，用于访问动态路由参数。

```javascript
import { useParams } from 'react-router-dom';

function UserProfile() {
const { id } = useParams();

return (

User Profile: {id}

);
}
```

7. useLocation

useLocation 是一个 React Hook，它返回一个表示当前 URL 的对象。这个对象包含有关 URL 的信息，例如路径名、查询参数和状态。

```javascript
import { useLocation } from 'react-router-dom';

function MyComponent() {
const location = useLocation();

console.log(location.pathname);
console.log(location.search);
console.log(location.state);

return (

);
}
```

四、高级概念

1. 嵌套路由

嵌套路由允许我们将路由组织成层次结构，这对于构建复杂的应用非常有用。我们可以在 Route 组件内部嵌套其他的 Route 组件来创建子路由。

javascript
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="users" element={<Users />}>
<Route index element={<UserList />} />
<Route path=":id" element={<UserProfile />} />
</Route>
</Route>
</Routes>

在这个示例中，Layout 组件可以作为父路由的通用布局，而 /、/about 和 /users 是它的子路由。/users 路径下又嵌套了 UserList 和 UserProfile 两个子路由。

2. 代码分割

代码分割是一种优化技术，它可以将应用的代码拆分成多个块，并按需加载这些块。这可以减少初始加载时间，并提高应用的性能。React Router DOM 与 React 的 lazy 和 Suspense 功能集成，可以轻松实现路由级别的代码分割。

```javascript
import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
return (
Loading...\