嵌套路由是指在一个路由中套入另一个路由,实现多层路由配置的方式。具体来说,当一个路由需要包含另一个路由时,可以将这个路由配置为父路由,将包含的路由配置为子路由,从而形成一个嵌套路由。
在React中,可以使用react-router库来定义嵌套路由。要定义嵌套路由,需要先定义父路由和子路由的组件。父路由和子路由分别使用<Route>组件来定义,并且需要在父路由的组件中嵌入子路由组件的位置。例如:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';const Child = ({ match }) => (<div><h3>ID: {match.params.id}</h3></div>
);const Parent = () => (<Router><div><h2>Parent</h2><ul><li><Link to="/parent/1">Child 1</Link></li><li><Link to="/parent/2">Child 2</Link></li><li><Link to="/parent/3">Child 3</Link></li></ul><Route path="/parent/:id" component={Child} /></div></Router>
);export default Parent;
在上面的代码中,我们定义了一个Parent组件作为父路由,包含三个<Link>组件作为子路由链接。在父路由下方,我们使用了<Route>组件,并且指定了子路由的路径和对应的组件。在子路由组件中,我们可以通过match.params.id获取当前子路由的id参数。
这样就完成了一个简单的嵌套路由配置。可以根据需要添加更多的父子路由组合。