如何将嵌套路由组件从父组件底部改为在新页面展示？

嘿，我来帮你搞定这个问题！要把原本嵌套在父组件底部的CategoryList组件改成新页面展示，其实只需要调整路由配置和跳转逻辑就行，具体步骤如下：

原来你的路由应该是把CategoryList作为父组件的嵌套子路由，现在要把它改成独立的顶级路由，这样它就会占据整个页面渲染：

如果你用的是React Router v5 #

// 原来的嵌套路由写法
<Route path="/parent" component={ParentComponent}>
  <Route path="categories" component={CategoryList} />
</Route>

// 修改后的独立路由写法
<Route path="/parent" component={ParentComponent} />
<Route path="/categories" component={CategoryList} />

如果你用的是React Router v6（当前主流版本） #

// 原来的嵌套路由写法
<Routes>
  <Route path="/parent" element={<ParentComponent />}>
    <Route path="categories" element={<CategoryList />} />
  </Route>
</Routes>

// 修改后的独立路由写法
<Routes>
  <Route path="/parent" element={<ParentComponent />} />
  <Route path="/categories" element={<CategoryList />} />
</Routes>

原来你在父组件里跳转到CategoryList的链接是指向嵌套路径的，现在要改成指向新的独立路由路径：

// 原来的嵌套跳转链接
<Link to="/parent/categories">查看分类列表</Link>

// 修改后的新页面跳转链接
<Link to="/categories">查看分类列表</Link>

你写的CategoryList组件里的fetch数据逻辑完全不用改，它现在会作为独立页面渲染，而不是嵌套在父组件底部。我帮你补全了没写完的代码示例：

import React, { Component } from 'react';

class CategoryList extends Component {
  state = { categories: [], error: false }

  componentDidMount() {
    fetch('http://localhost:8080/testcategory')
      .then(results => results.json())
      .then(data => this.setState({ categories: data.categories }))
      .catch(error => this.setState({ error: true }));
  }

  // 补全分类选择的逻辑示例
  categorySelectHandler = (category) => {
    // React Router v5 用history跳转
    this.props.history.push(`/categories/${category.id}`);
    // 如果是v6版本，建议改成函数组件用useNavigate钩子：
    // const navigate = useNavigate(); navigate(`/categories/${category.id}`);
  }

  render() {
    if (this.state.error) {
      return <div>加载分类失败，请稍后重试</div>;
    }
    return (
      <div className="category-list">
        <h1>分类列表</h1>
        <ul>
          {this.state.categories.map(category => (
            <li key={category.id} onClick={() => this.categorySelectHandler(category)}>
              {category.name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

// React Router v5 中类组件需要withRouter高阶组件来获取history
// import { withRouter } from 'react-router-dom';
// export default withRouter(CategoryList);

// v6版本如果用类组件，也可以用withRouter，或者直接改成函数组件更方便
export default CategoryList;

内容的提问来源于stack exchange，提问作者Chetan Gawai