面试题：React Router 中嵌套路由与动态路由结合实现复杂导航

安装 React Router：
- 首先确保项目中安装了 react - router - dom，可以使用 npm install react - router - dom 或 yarn add react - router - dom 进行安装。

设计路由结构：

在 React 应用的入口文件（通常是 index.js 或 App.js）中设置路由。假设项目结构中有 Home 组件（首页）、Category 组件（分类页）、ArticleDetail 组件（文章详情页）。

import { BrowserRouter as Router, Routes, Route } from'react - router - dom';
import Home from './components/Home';
import Category from './components/Category';
import ArticleDetail from './components/ArticleDetail';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/category/:categoryId" element={<Category />}>
                    {/* 这里可以处理分类页下可能存在的嵌套路由 */}
                </Route>
                <Route path="/article/:articleId" element={<ArticleDetail />} />
            </Routes>
        </Router>
    );
}

export default App;

处理嵌套路由：

以分类页为例，如果分类页下还有子页面，比如某个分类的归档页面。可以在 Category 组件内部继续设置路由。

import { Routes, Route } from'react - router - dom';
import CategoryArchive from './CategoryArchive';

function Category() {
    return (
        <Routes>
            <Route path="archive" element={<CategoryArchive />} />
        </Routes>
    );
}

export default Category;

这样访问 /category/1/archive 就可以渲染 CategoryArchive 组件，其中 1 是分类的 categoryId。

动态路由的参数传递：

在上述路由配置中，categoryId 和 articleId 就是动态路由参数。
在组件中获取参数的方法，以 ArticleDetail 组件为例：

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

function ArticleDetail() {
    const { articleId } = useParams();
    // 这里的 articleId 就是从路由中获取的参数
    return (
        <div>
            <p>文章详情页，文章 ID: {articleId}</p>
        </div>
    );
}

export default ArticleDetail;

页面渲染逻辑：
- 首页：Home 组件直接渲染首页相关内容，如最新文章列表、热门分类等。
- 分类页：Category 组件根据传入的 categoryId 从数据层获取该分类的相关文章数据，并渲染文章列表。如果存在嵌套路由，根据子路由路径渲染相应子组件。
- 文章详情页：ArticleDetail 组件根据传入的 articleId 从数据层获取具体文章内容，并渲染文章标题、正文等详细信息。

星途面试题库

面试题：React Router 中嵌套路由与动态路由结合实现复杂导航

知识考点

面试题答案