React 路由进阶：掌握嵌套路由和动态路由

前端

2023-10-10 10:49:50

作为一名技术博客创作专家，我将以独到的视角，带领你领略 React 路由的进阶世界。

React 嵌套路由

在 React 应用程序中，嵌套路由允许你创建层次结构，其中一个路由嵌套在另一个路由中。这非常适用于复杂的应用程序，其中不同的视图或组件需要根据 URL 的不同部分进行渲染。

动态路由

动态路由允许你使用参数化路径来定义路由。这些参数可以动态地从 URL 中提取并传递给路由组件。这使得构建可重复使用的和可配置的路由变得更加容易。

嵌套路由示例

以下示例展示了如何使用 React Router 创建嵌套路由：

// Film.js
import React from 'react';

export default function Film() {
  return <h1>电影列表</h1>;
}

// Director.js
import React from 'react';

export default function Director() {
  return <h1>导演详情</h1>;
}

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/films" element={<Film />}>
          <Route path="/films/:id" element={<Director />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

在上面的示例中，/films 路由嵌套了 /films/:id 路由。这将导致当访问 /films/123 时，Director 组件将渲染并接收动态参数 id 的值。

动态路由示例

以下示例展示了如何使用动态路由：

// Post.js
import React from 'react';

export default function Post({ id, title }) {
  return <h1>{title}</h1>;
}

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/posts/:id/:title" element={<Post />} />
      </Routes>
    </BrowserRouter>
  );
}