import { Navigate, Outlet, useParams, useSearchParams, useMatch, useLocation, useRoutes,useNavigate,route,routes,useLocation } from 'react-router-dom'
// 使用路由表 不需要 ,route,routes 进行 镶套 Outlet 如同 view-router 试图容器 及 路由占位符
// useParams, useSearchParams, useMatch, 这三个 立即 还复杂 我不用 你们随意
export default [
{
path: '/home',
element: <Home />
},
{
path: '/',
element: <Navigate to="/dashboard" />
}
]
// jsx 中使用
function App() {
const routerArr = useRoutes(routers)
return (
<>
<div className="App">
asdasdasd
</div>
{/* 路由展示区域 */}
<>
<Outlet />
</>
</>
);
}
// 路由跳转
{
path: '/home:id:name',
element: <Home />
},
{/* 路由传参 需要先在 路由表的 路由中 定义 传参规则 也就是留个位置 */}
<div onClick={() => {
navigate('路由名', {
state: {
name: '张三',
id: '123123'
},
replace: true
})
}}></div>
// 接收参数
const { state } = useLocation()
console.log('====================================');
console.log(state.id);
console.log(state.name);
console.log(state.id);
console.log('====================================');
// 好了结束 0.0
react-router-dom6.0版本
最新推荐文章于 2024-10-29 16:24:56 发布