react 路由使用useRoutes Api
Posted GHUIJS
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 路由使用useRoutes Api相关的知识,希望对你有一定的参考价值。
react-router 6使用useRoutes hook时,需要在项目的根节点包裹一层BrowserRouter,不然报错
import NavLink,Navigate,useRoutes from 'react-router-dom';
import Home from './home';
import About from './about';
import './index.css'
export const ReactRouterTest = () =>
const element = useRoutes([
path:'/home',
element: <Home />
,
path:'/about',
element: <About />
,
path:'/',
element: <Navigate to='/home' />
])
return (
<div>
<div>
<NavLink className='nav' to='/home'>home</NavLink>
<NavLink className='nav' to='/about'>about</NavLink>
</div>
element
</div>
)
以上是关于react 路由使用useRoutes Api的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React Router 6 中使用带有 useRoutes 的索引路由
前端实战|React18极客园——布局模块(useRoutes路由配置处理Token失效退出登录)
React Router V6 - 错误:useRoutes() 只能在 <Router> 组件的上下文中使用
React Router v6 `useRouter` Hook with `basename` 和 Redirection