React 路由器：创建两条路由，以不同的状态呈现相同的组件

Question

我正在使用 createBrowserRouter 来渲染一个根据路由更改其内部状态的组件。让该组件知道其所在路径的最佳方法是什么？

const router = createBrowserRouter([
  {
    path: "layout/backup/make",
    Component: Backup
  },
  {
    path: "layout/backup/restore",
    Component: Backup
  }
]);

Answer 1

使用

element

属性而不是

Component

！然后你可以将 props 传递给你的

Backup

组件。

const router = createBrowserRouter([
  {
    path: "layout/backup/make",
    element: <Backup foo />
  },
  {
    path: "layout/backup/restore",
    element: <Backup bar />
  }
]);