如何将反应路线绑定到显示的对话框？

Question

React Router 在 Nested Routes 上有很好的教程。

而且创建和理解起来非常容易。

但是，我想将路由绑定到对话框。

基本上我有一个 /customers 的客户列表，上面有一个 New 按钮。当它被点击时，一个表单会显示在一个对话框中。我正在使用 Material UI。我想将路线更改为 /customers/create 路线，并且路线更改的结果显示对话框。这意味着即使用户按下 F5 并刷新页面，他们仍然会看到对话框中显示的表单。

我做不到。我创建了嵌套的 <Route /> 定义：

<Routes>
    <Route path='/customers' element={<Customers />}>
        <Route path='create' element={<CreateCustomer />} />
    </Route>
</Routes>

而且我还在 Customers.js 中插入了一个 <Outlet />:

import { Outlet } from 'react-router-dom'

const Customers = () => {
    const [dialogIsShown, setDialogIsShown] = useState(false);
    return <div>
        <Button onClick={() => setDialogIsShown(true)}>Create</Button>
        {* customer creation component is here, inside a dialog *}
        <Dilog open={dialogIsShown}>
            <CreateCustomer />
        </Dialog>
        {* other UI parts *}
        <Outlet />
    </div>
}

当我点击新按钮时，我使用useNavigate来改变路线。但是没有任何反应。

我被困在这里了。

感谢任何帮助。

Answer 1

我了解到您想单击 Customer 组件中的按钮以导航到 "/customers/create" 路由并将 CreateCustomer 组件呈现为 Dialog .如果这是正确的，那么我相信以下内容应该接近您所描述的所需行为。

import { Outlet, useNavigate } from 'react-router-dom'

const Customers = () => {
  const navigate = useNavigate();

  return (
    <div>
      ... customers list ...

      <Button onClick={() => navigate("create")}>Create</Button>
      <Outlet />
    </div>
  );
}

当路由匹配并呈现元素时，默认打开对话框。

<Routes>
  <Route path='/customers' element={<Customers />}>
    <Route
      path='create'
      element={(
        <Dialog open>
          <CreateCustomer />
        </Dialog>
      )}
    />
  </Route>
</Routes>

如何将反应路线绑定到显示的对话框？

How to bind react route to a shown dialog?

javascript

reactjs

react-router-dom