How to bind react route to a shown dialog?

I've gathered that you want to click a button in the Customer component to navigate to the "/customers/create" route and render the CreateCustomer component into a Dialog. If this is correct then I believe the following should be close to what you are describing as desired behavior.

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

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

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

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

Render the dialog open by default when the route matches and the element is rendered.

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