react子路由动态渲染

在React中，可以使用React Router来实现路由功能。对于子路由的动态渲染，可以通过以下步骤实现：

1. 在父组件中定义子路由的路径和组件。

import { Switch, Route } from 'react-router-dom';

const ParentComponent = () => (
  <div>
    {/* 父组件内容 */}
    <Switch>
      <Route path="/parent/child1" component={Child1Component} />
      <Route path="/parent/child2/:id" component={Child2Component} />
    </Switch>
  </div>
);

2. 在子组件中获取父组件传递的参数。

const Child2Component = ({ match }) => {
  const { id } = match.params;

  return (
    <div>
      {/* 子组件内容 */}
      <p>子路由参数：{id}</p>
    </div>
  );
};

3. 在父组件中使用Link组件来跳转到子路由。

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

const ParentComponent = () => (
  <div>
    {/* 父组件内容 */}
    <ul>
      <li><Link to="/parent/child1">子路由1</Link></li>
      <li><Link to="/parent/child2/123">子路由2</Link></li>
    </ul>
    <Switch>
      <Route path="/parent/child1" component={Child1Component} />
      <Route path="/parent/child2/:id" component={Child2Component} />
    </Switch>
  </div>
);

4. 在子组件中使用Link组件来返回父组件。

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

const Child2Component = ({ match }) => {
  const { id } = match.params;

  return (
    <div>
      {/* 子组件内容 */}
      <Link to="/parent">返回父路由</Link>
      <p>子路由参数：{id}</p>
    </div>
  );
};

以上就是React子路由动态渲染的实现步骤。