2024年6月9日发(作者：)

react 子路由的用法

React的子路由用法是指在一个父级组件中定义多个子级组件，

并通过路由将它们显示在不同的URL路径下。

首先，在父级组件中定义路由，并在路由组件中引入子级组件，

例如：

```js

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

router-dom';

import SubComponent1 from './SubComponent1';

import SubComponent2 from './SubComponent2';

function ParentComponent() {

return (

component={SubComponent1} />

component={SubComponent2} />

);

}

export default ParentComponent;

```

然后，你可以在子级组件中定义要显示的内容，例如：

```js

function SubComponent1() {

return (

);

}

```

```js

function SubComponent2() {

return (

);

}

```

最后，在应用的入口处，将父级组件渲染到DOM中，例如：

```js

import React from 'react';

import ReactDOM from 'react-dom';

import ParentComponent from './ParentComponent';

(

,

mentById('root')

);

```

现在，当你访问`localhost:3000/subcomponent1`时，将会

显示SubComponent1组件的内容。当访问

`localhost:3000/subcomponent2`时，将会显示

SubComponent2组件的内容。这就是React子路由的用法。