useRoutes怎么嵌套路由
时间: 2023-05-30 07:04:54 浏览: 73
useRoutes是React Router v6中的一个hook,它用于在函数式组件中定义嵌套路由。下面是一个示例:
```
import { useRoutes } from 'react-router-dom';
function App() {
const routes = useRoutes([
{
path: '/',
element: <Layout />,
children: [
{ path: '/', element: <HomePage /> },
{ path: 'about', element: <AboutPage /> },
{ path: 'contact', element: <ContactPage /> }
]
},
{
path: '/login',
element: <LoginPage />
},
{
path: '*',
element: <NotFoundPage />
}
]);
return (
<div>
{routes}
</div>
);
}
```
在这个例子中,我们定义了三个路由。第一个路由是根路由,它包含三个子路由:'/'、'about'和'contact'。第二个路由是'/login',它对应LoginPage组件。第三个路由是'*',它表示匹配所有未定义的路径,并显示NotFoundPage组件。
通过调用useRoutes并传入一个路由数组,我们可以将嵌套路由定义在函数式组件中。在返回的JSX中,我们可以将routes渲染到页面中,这将根据当前路径渲染正确的组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)