在路径上渲染模态，并在背景中渲染父路径

如何解决在路径上渲染模态，并在背景中渲染父路径

我正在使用ReachUI Dialog来呈现一个对话框（模态）。 如下面的代码所示，Dialog可在路由products/create/处路由。

当我路由到ProductsTable时，是否可以同时渲染products/（位于父路由Dialog）和products/create，因此我可以看到模态背景中的ProductsTable组件了吗？ 我希望通过react-router来实现。

这是现在的代码：

...
import { Switch,Route,useRouteMatch,match,useHistory,} from "react-router-dom";
import { Dialog } from "@reach/dialog";

export function ProductsPage() {
  const { url }: match = useRouteMatch();
  const { push } = useHistory();

  const gotToCreateProduct = () => push(`${url}/create`);

  return (
      <Switch>
        <Route exact path={url}>
          <Page title="Products" onCreateButtonClick={gotToCreateProduct}>
            <ProductsTable></ProductsTable>
          </Page>
        </Route>
        <Route path={`${url}/create`}>
            <Dialog isOpen={true} onDismiss={() => push(url)}>
                <ProductForm></ProductForm>
            </Dialog>
        </Route>
      </Switch>
  );
}

解决方法

将您的第一条路线更改为

<Route path={`${url}*`}>
  <Page title="Products" onCreateButtonClick={gotToCreateProduct}>
    <ProductsTable></ProductsTable>
  </Page>
</Route>

您的组件将针对以url开头的每条路线显示 并通过删除Switch组件，您将能够匹配多条路线

,

这应该是一个开始：https://reactrouter.com/web/example/modal-gallery

只有当您从父级导航到模版时，它们才有条件地将其渲染为模态。您可以对其进行修改，使其始终呈现为模态。

,

自己弄清楚， 基本上，您只需要将2个Switch组件彼此相邻，并删除父级exact的{​​{1}}属性。 这样，两个Route都将有一个匹配项并呈现其路线。 有意义并且有效。

Switch