Question

我正在使用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>
  );
}

Answer 1

将您的第一条路线更改为

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

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

Answer 2

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

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

Answer 3

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

Switch

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

3 个答案: