react 子路由的用法
React的子路由用法是指在一个父级组件中定义多个子级组件，并通过路由将它们显示在不同的URL路径下。
首先，在父级组件中定义路由，并在路由组件中引入子级组件，例如：
```js
react router cacheimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import SubComponent1 from './SubComponent1';
import SubComponent2 from './SubComponent2';
function ParentComponent() {
  return (
    <Router>
      <Switch>
        <Route path="/subcomponent1" component={SubComponent1} />
        <Route path="/subcomponent2" component={SubComponent2} />
      </Switch>
    </Router>
  );
}
export default ParentComponent;
```
然后，你可以在子级组件中定义要显示的内容，例如：
```js
function SubComponent1() {
  return (
    <div>
      <h1>Sub Component 1</h1>
      <p>This is sub component 1.</p>
    </div>
  );
}
```
```js
function SubComponent2() {
  return (
    <div>
      <h1>Sub Component 2</h1>
      <p>This is sub component 2.</p>
    </div>
  );
}
```
最后，在应用的入口处，将父级组件渲染到DOM中，例如：
```js
import React from 'react';
import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';
der(
  <React.StrictMode>
    <ParentComponent />
  </React.StrictMode>,
  ElementById('root')
);
```
现在，当你访问`localhost:3000/subcomponent1`时，将会显示SubComponent1组件的内容。当访问`localhost:3000/subcomponent2`时，将会显示SubComponent2组件
的内容。这就是React子路由的用法。