react router路由v6 重定向实现

最新推荐文章于 2024-09-02 08:44:07 发布

~~big_dragon~~

最新推荐文章于 2024-09-02 08:44:07 发布

阅读量3.2k

点赞数 2

分类专栏： react router路由文章标签： react reactjs

本文链接：https://blog.csdn.net/weixin_44147791/article/details/122253612

版权

react router路由专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在ReactRouterV6中如何实现路由重定向。通过使用`useRoutes`、`Navigate`和`Outlet`组件，创建了一个包含重定向的路由配置。在根路径`/`下，设置了`Home`组件并利用`Navigateto=/team`实现了默认重定向到`Team`组件。同时，`messages`路径指向`One`组件。

摘要由CSDN通过智能技术生成

react router V6 路由重定向

React router V6 路由重定向

import { useRoutes, Navigate, Outlet } from "react-router-dom";

function Home() {
  return <div>
    <h1>父级的</h1>
    <Outlet/>
  </div>;
}
function One() {
  console.log('11111')
  return <div>One</div>;
}
function Team() {
  console.log('22222')
  return <div>Team</div>;
}

export default function App() {
  let element = useRoutes([
    {
      path: "/",
      element: <Home />,
      children: [
        {
          index: true,
          element: <Navigate to="/team" />,
        },
        {
          path: "messages",
          element: <One />,
        },
      ],
    },
    { path: "team", element: <Team /> },
  ]);

  return element;
}