如何在反应路由器 v6 中的一个路径中添加两个元素 - Javascript

在React Router v6中，可以使用新的Hooks API实现路由功能。通过使用useRoutes和useNavigate，我们可以在React应用程序中实现许多不同的路由类型。

下面是如何在React Router v6中添加两个元素到路径的示例。

import { useRoutes, useNavigate } from 'react-router-dom';

function MyApp() {
  const navigate = useNavigate();

  const routes = useRoutes([
    {
      path: '/',
      element: <HomePage />,
    },
    {
      path: '/blog',
      element: <BlogPage />,
      children: [
        {
          path: ':year/:month/:slug',
          element: <BlogPostPage />,
        },
      ],
    },
    {
      path: '/about',
      element: <AboutPage />,
    },
  ]);

  return (
    <div>
      <nav>
        <ul>
          <li>
            <button onClick={() => navigate('/')}>Home</button>
          </li>
          <li>
            <button onClick={() => navigate('/blog')}>Blog</button>
          </li>
          <li>
            <button onClick={() => navigate('/about')}>About</button>
          </li>
        </ul>
      </nav>
      <main>{routes}</main>
    </div>
  );
}

在上面的示例中，我们定义了三个路由：HomePage，BlogPage和AboutPage。BlogPage还有一个子路由BlogPostPage。

在BlogPage的路径中添加了三个占位符:year，:month和:slug来显示博客文章，并将这个子路由作为children添加到父级路由。

我们可以使用useNavigate来导航到不同的路由，并使用占位符来构建路径。例如，navigate('/blog/2022/10/my-post')将导航到BlogPostPage并显示ID为2022，10和my-post的博客文章。

通过这种方式，我们可以轻松地在React Router v6中添加多个元素到一个路径中，并使用占位符来构建动态路径。