What's the correct method for multiple paths pointing to the same LiveView route?

Phoenix Forum Questions / Help
, ,
1

I have two paths, “/” and “/keys”, which are both pointing to the same LiveView route “KeyLive.Index, :index”. What’s the correct method for pointing these paths pointing to the same LiveView route?

At the moment, I am doing the following:

  scope "/", KeyVaultWeb do
    pipe_through :browser
    live "/", KeyLive.Index, :index
    live "/keys", KeyLive.Index, :index

This works, but when I click on the Home page (“/”) there is a very brief flash message stating something about “reconnecting” and if I look at the console, a single click seems to trigger the creation of two LiveView sockets - Note the two CONNECTED messages, two CSRF Tokens and two messages related to mount:

[info] GET /
[debug] Processing with KeyVaultWeb.KeyLive.Index.index/2
  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="keys" db=0.0ms idle=1291.4ms
SELECT k0."id", k0."key_identifier", k0."recovery_key", k0."inserted_at", k0."updated_at" FROM "keys" AS k0 []
↳ KeyVaultWeb.KeyLive.Index.mount/3, at: lib/key_vault_web/live/key_live/index.ex:9
[info] Sent 200 in 1ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 24µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "GSpwOn1YDQYfGFodNVxlFSAJJhssGyBwmNHvPmUYQNkhllVfxAc-Tsx1", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[info] CONNECTED TO Phoenix.LiveView.Socket in 24µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "RhB_elUYEA1jO2A9YHdZNj9wKWYrXRAu2tG6x-HR-mQH9GjEg8lPS5Ho", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[debug] MOUNT KeyVaultWeb.KeyLive.Index
  Parameters: %{}
  Session: %{"_csrf_token" => "td8L-5X_NV1uY03sXHE6xhXA"}

[debug] QUERY OK source="keys" db=0.1ms idle=1633.5ms
SELECT k0."id", k0."key_identifier", k0."recovery_key", k0."inserted_at", k0."updated_at" FROM "keys" AS k0 []
↳ KeyVaultWeb.KeyLive.Index.mount/3, at: lib/key_vault_web/live/key_live/index.ex:9
[debug] Replied in 373µs
[debug] HANDLE PARAMS in KeyVaultWeb.KeyLive.Index
  Parameters: %{}
[debug] Replied in 31µs

I don’t see this behaviour when I click on the second path, “/keys”:

[debug] MOUNT KeyVaultWeb.KeyLive.Index
  Parameters: %{}
  Session: %{"_csrf_token" => "td8L-5X_NV1uY03sXHE6xhXA"}
[debug] QUERY OK source="keys" db=0.1ms idle=190.9ms
SELECT k0."id", k0."key_identifier", k0."recovery_key", k0."inserted_at", k0."updated_at" FROM "keys" AS k0 []
↳ KeyVaultWeb.KeyLive.Index.mount/3, at: lib/key_vault_web/live/key_live/index.ex:9
[debug] Replied in 354µs
[debug] HANDLE PARAMS in KeyVaultWeb.KeyLive.Index
  Parameters: %{}
[debug] Replied in 33µs