编辑子路由嵌套资源的组件

在 React Router 中，编辑子路由嵌套资源的组件可以通过在路由配置中定义嵌套路由来实现。以下是一个示例：

import React from'react';
import { BrowserRouter as Router, Route, Link } from'react-router-dom';

// 父组件
function ParentComponent() {
  return (
    <Router>
      <div>
        <h1>Parent Component</h1>
        <ul>
          <li>
            <Link to="/child1">Child 1</Link>
          </li>
          <li>
            <Link to="/child2">Child 2</Link>
          </li>
        </ul>

        <Route path="/child1" component={ChildComponent1} />
        <Route path="/child2" component={ChildComponent2} />
      </div>
    </Router>
  );
}

// 子组件 1
function ChildComponent1() {
  return (
    <div>
      <h2>Child Component 1</h2>
      <ul>
        <li>
          <Link to="/child1/edit">Edit</Link>
        </li>
      </ul>

      <Route path="/child1/edit" component={EditComponent1} />
    </div>
  );
}

// 子组件 2
function ChildComponent2() {
  return (
    <div>
      <h2>Child Component 2</h2>
      <ul>
        <li>
          <Link to="/child2/edit">Edit</Link>
        </li>
      </ul>

      <Route path="/child2/edit" component={EditComponent2} />
    </div>
  );
}

// 编辑组件 1
function EditComponent1() {
  return (
    <div>
      <h3>Edit Component 1</h3>
      <form>
        <input type="text" />
        <button type="submit">Save</button>
      </form>
    </div>
  );
}

// 编辑组件 2
function EditComponent2() {
  return (
    <div>
      <h3>Edit Component 2</h3>
      <form>
        <input type="text" />
        <button type="submit">Save</button>
      </form>
    </div>
  );
}

export default ParentComponent;

在上述示例中，我们定义了一个父组件 ParentComponent，它包含两个子组件 ChildComponent1 和 ChildComponent2。每个子组件都有一个编辑链接，点击编辑链接会跳转到相应的编辑组件。

在路由配置中，我们使用 Route 组件来定义路由。Route 组件的 path 属性指定了路由的路径，component 属性指定了路由对应的组件。在这个例子中，我们定义了三个路由：/child1、/child2 和 /child1/edit、/child2/edit。当用户访问 /child1 或 /child2 时，会显示相应的子组件。当用户点击编辑链接时，会跳转到相应的编辑组件。

希望这个示例对你有帮助。如果你有任何其他问题，请随时提问。