react路由子路由

React 路由中的子路由是指在一个父级路由下的嵌套路由。通过使用 React Router 库，可以轻松地实现子路由的配置和导航。

在 React Router v5 中，可以使用 `<Route>` 组件来定义父级和子级路由。示例如下：

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/parent" component={Parent} />
      </Switch>
    </Router>
  );
}

function Parent() {
  return (
    <div>
      <h2>Parent Component</h2>
      <Switch>
        <Route exact path="/parent" component={ParentHome} />
        <Route path="/parent/child" component={Child} />
      </Switch>
    </div>
  );
}

function ParentHome() {
  return <h3>Parent Home</h3>;
}

function Child() {
  return <h3>Child Component</h3>;
}

function Home() {
  return <h2>Home Component</h2>;
}

在上述示例中，`<App>` 组件是应用的根组件，并包含两个路由：根路径 `'/'` 和父级路径 `'/parent'`。当访问根路径时，会渲染 `<Home>` 组件；当访问父级路径 `'/parent'` 时，会渲染 `<Parent>` 组件。

`<Parent>` 组件中包含了两个子路由：父级路径 `'/parent'` 和子级路径 `'/parent/child'`。当访问父级路径 `'/parent'` 时，会渲染 `<ParentHome>` 组件；当访问子级路径 `'/parent/child'` 时，会渲染 `<Child>` 组件。

需要注意的是，为了确保子路由能够正确匹配和渲染，需要在父级组件中使用 `<Switch>` 组件包裹子路由，以确保只有一个子路由被渲染。

以上是 React Router v5 的用法示例，如果使用的是其他版本的 React Router，请根据相应版本的文档进行配置。希望这个示例对你有所帮助！如果有其他问题，请继续提问。