diff --git a/src/js/src/client.ts b/src/js/src/client.ts
index f3bb6eb3..013d127a 100644
--- a/src/js/src/client.ts
+++ b/src/js/src/client.ts
@@ -1,28 +1,40 @@
 import {
   BaseReactPyClient,
-  type GenericReactPyClientProps,
   type ReactPyClientInterface,
   type ReactPyModule,
-  type ReactPyUrls,
 } from "@reactpy/client";
-import { createReconnectingWebSocket } from "./websocket";
+import { PageClient } from "./pageClient";
+import type { ComponentConfig } from "./mount";
+
+export type ReactPyDjangoClientProps = {
+  rootId: string;
+  pageClient: PageClient;
+  mountElement: HTMLElement;
+  jsModulesPath: string;
+  componentConfig: ComponentConfig;
+};
 
 export class ReactPyDjangoClient
   extends BaseReactPyClient
   implements ReactPyClientInterface
 {
-  urls: ReactPyUrls;
-  socket: { current?: WebSocket };
-  mountElement: HTMLElement;
-  prerenderElement: HTMLElement | null = null;
-  offlineElement: HTMLElement | null = null;
-  private readonly messageQueue: any[] = [];
+  readonly rootId: string;
+  readonly pageClient: PageClient;
+  readonly mountElement: HTMLElement;
+  readonly prerenderElement: HTMLElement | null = null;
+  readonly offlineElement: HTMLElement | null = null;
+  readonly jsModulesPath: string;
+  private readonly componentConfig: ComponentConfig;
 
-  constructor(props: GenericReactPyClientProps) {
+  constructor(props: ReactPyDjangoClientProps) {
     super();
 
-    this.urls = props.urls;
+    this.rootId = props.rootId;
+    this.pageClient = props.pageClient;
     this.mountElement = props.mountElement;
+    this.jsModulesPath = props.jsModulesPath;
+    this.componentConfig = props.componentConfig;
+
     this.prerenderElement = document.getElementById(
       props.mountElement.id + "-prerender",
     );
@@ -30,13 +42,17 @@ export class ReactPyDjangoClient
       props.mountElement.id + "-offline",
     );
 
-    this.socket = createReconnectingWebSocket({
-      url: this.urls.componentUrl,
-      readyPromise: this.ready,
-      ...props.reconnectOptions,
-      // onMessage: Use standard ReactPy message routing
-      onMessage: async ({ data }) => this.handleIncoming(JSON.parse(data)),
-      // onClose: If offlineElement exists, show it and hide the mountElement/prerenderElement
+    // Register with the shared page client for message routing
+    this.pageClient.registerComponent(this.rootId, {
+      handleIncoming: (message: any) => this.handleIncoming(message),
+      onOpen: () => {
+        // Re-mount the component when the WebSocket reconnects
+        this.sendMountMessage();
+        if (this.offlineElement && this.mountElement) {
+          this.offlineElement.hidden = true;
+          this.mountElement.hidden = false;
+        }
+      },
       onClose: () => {
         if (this.prerenderElement) {
           this.prerenderElement.remove();
@@ -47,28 +63,36 @@ export class ReactPyDjangoClient
           this.offlineElement.hidden = false;
         }
       },
-      // onOpen: If offlineElement exists, hide it and show the mountElement
-      onOpen: () => {
-        if (this.offlineElement && this.mountElement) {
-          this.offlineElement.hidden = true;
-          this.mountElement.hidden = false;
-        }
-      },
+    });
+
+    // If the shared socket is already open, send the mount message immediately.
+    // This handles dynamically-added components registered after the initial
+    // page render (e.g. lazy-loaded tabs or conditionally rendered components).
+    if (this.pageClient.socket.current?.readyState === WebSocket.OPEN) {
+      this.sendMountMessage();
+    }
+  }
+
+  /** Send a mount-component message to the server so it constructs this component. */
+  sendMountMessage(): void {
+    this.pageClient.sendMessage(this.rootId, {
+      type: "mount-component",
+      rootId: this.rootId,
+      dottedPath: this.componentConfig.dottedPath,
+      componentUuid: this.componentConfig.componentUuid,
+      hasArgs: Boolean(this.componentConfig.hasArgs),
     });
   }
 
   sendMessage(message: any): void {
-    if (
-      this.socket.current &&
-      this.socket.current.readyState === WebSocket.OPEN
-    ) {
-      this.socket.current.send(JSON.stringify(message));
-    } else {
-      this.messageQueue.push(message);
-    }
+    this.pageClient.sendMessage(this.rootId, message);
   }
 
   loadModule(moduleName: string): Promise<ReactPyModule> {
-    return import(`${this.urls.jsModulesPath}${moduleName}`);
+    return import(`${this.jsModulesPath}${moduleName}`);
+  }
+
+  destroy(): void {
+    this.pageClient.unregisterComponent(this.rootId);
   }
 }
diff --git a/src/js/src/mount.tsx b/src/js/src/mount.tsx
index 26a02211..6909d155 100644
--- a/src/js/src/mount.tsx
+++ b/src/js/src/mount.tsx
@@ -1,28 +1,35 @@
 import { ReactPyDjangoClient } from "./client";
+import { getPageClient } from "./pageClient";
 import { Layout, React } from "@reactpy/client";
 
+export type ComponentConfig = {
+  dottedPath: string;
+  componentUuid: string;
+  hasArgs: number;
+};
+
 export function mountComponent(
   mountElement: HTMLElement,
   host: string,
   urlPrefix: string,
-  componentPath: string,
+  componentConfig: ComponentConfig,
   resolvedJsModulesPath: string,
   reconnectInterval: number,
   reconnectMaxInterval: number,
   reconnectMaxRetries: number,
   reconnectBackoffMultiplier: number,
 ) {
-  // WebSocket route for component rendering
+  // Shared WebSocket route per page
   const wsProtocol = `ws${window.location.protocol === "https:" ? "s" : ""}:`;
   const wsOrigin = host
     ? `${wsProtocol}//${host}`
     : `${wsProtocol}//${window.location.host}`;
-  const componentUrl = new URL(`${wsOrigin}/${urlPrefix}/${componentPath}`);
+  const wsUrl = new URL(`${wsOrigin}/${urlPrefix}/`);
 
   // Embed the initial HTTP path into the WebSocket URL
-  componentUrl.searchParams.append("path", window.location.pathname);
+  wsUrl.searchParams.set("path", window.location.pathname);
   if (window.location.search) {
-    componentUrl.searchParams.append("qs", window.location.search);
+    wsUrl.searchParams.set("qs", window.location.search);
   }
 
   // HTTP route for JavaScript modules
@@ -30,22 +37,30 @@ export function mountComponent(
   const httpOrigin: string = host
     ? `${httpProtocol}//${host}`
     : `${httpProtocol}//${window.location.host}`;
-  const jsModulesPath: string =
-    resolvedJsModulesPath || `${urlPrefix}/web_module/`;
+  const jsModulesPath: string = resolvedJsModulesPath
+    ? `${httpOrigin}${resolvedJsModulesPath.startsWith("/") ? "" : "/"}${resolvedJsModulesPath}`
+    : `${httpOrigin}/${urlPrefix}/web_module/`;
 
-  // Configure a new ReactPy client
-  const client = new ReactPyDjangoClient({
-    urls: {
-      componentUrl: componentUrl,
-      jsModulesPath: `${httpOrigin}${jsModulesPath.startsWith("/") ? "" : "/"}${jsModulesPath}`,
-    },
-    reconnectOptions: {
+  // Get or create the shared page client (one per unique WS URL)
+  const pageClient = getPageClient(
+    wsUrl,
+    {
       interval: reconnectInterval,
       maxInterval: reconnectMaxInterval,
       maxRetries: reconnectMaxRetries,
       backoffMultiplier: reconnectBackoffMultiplier,
     },
-    mountElement: mountElement,
+    jsModulesPath,
+  );
+
+  // Create a per-component client that shares the page WebSocket
+  const rootId = componentConfig.componentUuid;
+  const client = new ReactPyDjangoClient({
+    rootId,
+    pageClient,
+    mountElement,
+    jsModulesPath,
+    componentConfig,
   });
 
   // Replace the prerender element with the real element on the first layout update
@@ -58,6 +73,10 @@ export function mountComponent(
     });
   }
 
+  // The mount-component message will be sent automatically when the shared WebSocket
+  // connects (via the onOpen callback in the ReactPyDjangoClient constructor).
+  // On reconnect the same callback handles re-mounting.
+
   // Start rendering the component
   if (client.mountElement) {
     React.render(<Layout client={client} />, client.mountElement);
diff --git a/src/js/src/pageClient.ts b/src/js/src/pageClient.ts
new file mode 100644
index 00000000..b12af6c4
--- /dev/null
+++ b/src/js/src/pageClient.ts
@@ -0,0 +1,148 @@
+import { type ReactPyModule } from "@reactpy/client";
+import { createReconnectingWebSocket } from "./websocket";
+
+type ComponentRecord = {
+  handleIncoming: (message: any) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+};
+
+const pageClients = new Map<string, PageClient>();
+
+export function getPageClient(
+  wsUrl: URL,
+  reconnectOptions: {
+    interval: number;
+    maxInterval: number;
+    maxRetries: number;
+    backoffMultiplier: number;
+  },
+  jsModulesPath: string,
+): PageClient {
+  const key = `${wsUrl.origin}${wsUrl.pathname}`;
+  if (!pageClients.has(key)) {
+    pageClients.set(
+      key,
+      new PageClient(key, wsUrl, reconnectOptions, jsModulesPath),
+    );
+  }
+  return pageClients.get(key)!;
+}
+
+/**
+ * Dispose a cached PageClient, close its WebSocket, and remove it from the
+ * global map. Useful during SPA page transitions where the old page's WS
+ * should no longer be reused.
+ */
+export function disposePageClient(key: string): void {
+  const client = pageClients.get(key);
+  if (client) {
+    client.close();
+    pageClients.delete(key);
+  }
+}
+
+export class PageClient {
+  private components: Map<string, ComponentRecord> = new Map();
+  socket: { current?: WebSocket } = {};
+  private readonly messageQueue: any[] = [];
+  private readonly jsModulesPath: string;
+
+  constructor(
+    private readonly key: string,
+    private wsUrl: URL,
+    reconnectOptions: {
+      interval: number;
+      maxInterval: number;
+      maxRetries: number;
+      backoffMultiplier: number;
+    },
+    jsModulesPath: string,
+  ) {
+    this.jsModulesPath = jsModulesPath;
+
+    // Immediately-resolved promise — the shared socket connects right away
+    const immediatePromise = Promise.resolve();
+
+    this.socket = createReconnectingWebSocket({
+      url: wsUrl,
+      readyPromise: immediatePromise,
+      ...reconnectOptions,
+      onMessage: async ({ data }) => this.handleIncoming(JSON.parse(data)),
+      onOpen: () => {
+        // Notify all registered components that the connection is back
+        for (const [, record] of this.components) {
+          if (record.onOpen) record.onOpen();
+        }
+        // Drain queued messages
+        while (this.messageQueue.length > 0) {
+          this.sendRaw(this.messageQueue.shift());
+        }
+      },
+      onClose: () => {
+        for (const [, record] of this.components) {
+          if (record.onClose) record.onClose();
+        }
+      },
+    });
+  }
+
+  registerComponent(rootId: string, record: ComponentRecord): void {
+    this.components.set(rootId, record);
+  }
+
+  unregisterComponent(rootId: string): void {
+    this.components.delete(rootId);
+  }
+
+  /** Tag an outgoing message with rootId and send it through the shared socket. */
+  sendMessage(rootId: string, message: any): void {
+    message.rootId = rootId;
+    this.sendRaw(message);
+  }
+
+  private sendRaw(message: any): void {
+    if (
+      this.socket.current &&
+      this.socket.current.readyState === WebSocket.OPEN
+    ) {
+      this.socket.current.send(JSON.stringify(message));
+    } else {
+      this.messageQueue.push(message);
+    }
+  }
+
+  /** Route an incoming message to the correct component by rootId. */
+  private handleIncoming(message: any): void {
+    const { rootId } = message;
+    if (rootId && this.components.has(rootId)) {
+      // Strip rootId before forwarding to the component's handler
+      const componentMessage = { ...message };
+      delete componentMessage.rootId;
+      this.components.get(rootId)!.handleIncoming(componentMessage);
+    }
+  }
+
+  /** Close the underlying WebSocket and clear all registered components. */
+  close(): void {
+    if (this.socket.current) {
+      this.socket.current.close();
+      this.socket.current = undefined;
+    }
+    this.components.clear();
+  }
+
+  /**
+   * Dispose this PageClient — closes the WebSocket, clears components, and
+   * removes the entry from the global cache. Call during SPA page transitions
+   * or when the page is fully torn down.
+   */
+  dispose(): void {
+    this.close();
+    disposePageClient(this.key);
+  }
+
+  loadModule(moduleName: string): Promise<ReactPyModule> {
+    return import(`${this.jsModulesPath}${moduleName}`);
+  }
+}
diff --git a/src/js/src/websocket.ts b/src/js/src/websocket.ts
index cd8bd868..7b807955 100644
--- a/src/js/src/websocket.ts
+++ b/src/js/src/websocket.ts
@@ -9,13 +9,12 @@ export function createReconnectingWebSocket(
   let retries = 0;
   let currentInterval = interval;
   let everConnected = false;
-  const closed = false;
   const socket: { current?: WebSocket } = {};
 
   async function connect() {
-    if (closed) {
-      return;
-    }
+    // Refresh the URL's path/query search params on each connection so that
+    // the server always sees the current page location, even after client-side
+    // navigation in an SPA.
     props.url.searchParams.set("path", window.location.pathname);
     props.url.searchParams.set("qs", window.location.search);
     socket.current = new WebSocket(props.url);
diff --git a/src/reactpy_django/templates/reactpy/component.html b/src/reactpy_django/templates/reactpy/component.html
index b7c9d705..ce78b5da 100644
--- a/src/reactpy_django/templates/reactpy/component.html
+++ b/src/reactpy_django/templates/reactpy/component.html
@@ -1,14 +1,14 @@
-{% load static %}
-
-{% if reactpy_failure and django_debug %}
+{% load static %} {% if reactpy_failure and django_debug %}
 <pre>{% firstof reactpy_error "UnknownError" %}: "{% firstof reactpy_dotted_path "UnknownPath" %}"</pre>
+{% endif %} {% if not reactpy_failure %} {% if reactpy_class %}
+<div id="{{reactpy_uuid}}" class="{{reactpy_class}}"></div>
+{% endif %} {% if not reactpy_class %}
+<div id="{{reactpy_uuid}}"></div>
+{% endif %} {% if reactpy_prerender_html %}
+<div id="{{reactpy_uuid}}-prerender">{{reactpy_prerender_html|safe}}</div>
+{% endif %} {% if reactpy_offline_html %}
+<div id="{{reactpy_uuid}}-offline" hidden>{{reactpy_offline_html|safe}}</div>
 {% endif %}
-
-{% if not reactpy_failure %}
-{% if reactpy_class %}<div id="{{reactpy_uuid}}" class="{{reactpy_class}}"></div>{% endif %}
-{% if not reactpy_class %}<div id="{{reactpy_uuid}}"></div>{% endif %}
-{% if reactpy_prerender_html %}<div id="{{reactpy_uuid}}-prerender">{{reactpy_prerender_html|safe}}</div>{% endif %}
-{% if reactpy_offline_html %}<div id="{{reactpy_uuid}}-offline" hidden>{{reactpy_offline_html|safe}}</div>{% endif %}
 <script type="module" crossorigin="anonymous">
     import { mountComponent } from "{% static 'reactpy_django/index.js' %}";
     const mountElement = document.getElementById("{{reactpy_uuid}}");
@@ -16,7 +16,11 @@
         mountElement,
         "{{reactpy_host}}",
         "{{reactpy_url_prefix}}",
-        "{{reactpy_component_path}}",
+        {
+            dottedPath: "{{reactpy_dotted_path}}",
+            componentUuid: "{{reactpy_component_uuid}}",
+            hasArgs: {{reactpy_has_args}},
+        },
         "{{reactpy_resolved_web_modules_path}}",
         Number("{{reactpy_reconnect_interval}}"),
         Number("{{reactpy_reconnect_max_interval}}"),
diff --git a/src/reactpy_django/templatetags/reactpy.py b/src/reactpy_django/templatetags/reactpy.py
index 09ec7eff..77a07955 100644
--- a/src/reactpy_django/templatetags/reactpy.py
+++ b/src/reactpy_django/templatetags/reactpy.py
@@ -177,7 +177,9 @@ def component(
         "reactpy_uuid": uuid,
         "reactpy_host": host or perceived_host,
         "reactpy_url_prefix": reactpy_config.REACTPY_URL_PREFIX,
-        "reactpy_component_path": f"{dotted_path}/{uuid}/{int(has_args)}/",
+        "reactpy_dotted_path": dotted_path,
+        "reactpy_component_uuid": uuid,
+        "reactpy_has_args": int(has_args),
         "reactpy_resolved_web_modules_path": f"/{RESOLVED_WEB_MODULES_PATH.strip('/')}/",
         "reactpy_reconnect_interval": reactpy_config.REACTPY_RECONNECT_INTERVAL,
         "reactpy_reconnect_max_interval": reactpy_config.REACTPY_RECONNECT_MAX_INTERVAL,
diff --git a/src/reactpy_django/websocket/consumer.py b/src/reactpy_django/websocket/consumer.py
index c63b192b..49e67697 100644
--- a/src/reactpy_django/websocket/consumer.py
+++ b/src/reactpy_django/websocket/consumer.py
@@ -4,6 +4,7 @@
 
 import asyncio
 import contextlib
+import copy
 import logging
 import traceback
 from datetime import timedelta
@@ -26,7 +27,6 @@
 
 if TYPE_CHECKING:
     from collections.abc import MutableMapping, Sequence
-    from concurrent.futures import Future
 
     from reactpy_django import models
     from reactpy_django.types import ComponentParams
@@ -45,17 +45,20 @@ def start_backhaul_loop():
 
 
 class ReactpyAsyncWebsocketConsumer(AsyncJsonWebsocketConsumer):
-    """Communicates with the browser to perform actions on-demand."""
+    """Communicates with the browser to perform actions on-demand.
+
+    Uses a single WebSocket connection per client webpage to serve
+    multiple ReactPy components, reducing connection overhead.
+    """
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        # New WebsocketConsumer attributes created by ReactPy
-        self.dispatcher: Future | asyncio.Task
-        self.threaded: bool
-        self.recv_queue: asyncio.Queue
-        self.dotted_path: str
-        self.component_session: models.ComponentSession | None = None
+        # Shared state across all components on this WebSocket
+        self.threaded: bool = False
+        self.component_queues: dict[str, asyncio.Queue] = {}
+        self.component_sessions: dict[str, models.ComponentSession | None] = {}
+        self.component_tasks: dict[str, asyncio.Task] = {}
 
     async def connect(self) -> None:
         """The browser has connected."""
@@ -85,31 +88,44 @@ async def connect(self) -> None:
                     f"ReactPy has failed to save scope['session']!\n{traceback.format_exc()}",
                 )
 
-        # Start the component dispatcher
+        # Each component gets its own rendering task when a "mount-component" message is received.
         self.threaded = REACTPY_BACKHAUL_THREAD
-        if self.threaded:
-            if not BACKHAUL_THREAD.is_alive():
-                await asyncio.to_thread(_logger.debug, "Starting ReactPy backhaul thread.")
-                BACKHAUL_THREAD.start()
-            self.dispatcher = asyncio.run_coroutine_threadsafe(self.run_dispatcher(), BACKHAUL_LOOP)
-        else:
-            self.dispatcher = asyncio.create_task(self.run_dispatcher())
+        self.scope["reactpy"] = {"id": id(self)}
 
     async def disconnect(self, code: int) -> None:
         """The browser has disconnected."""
         from reactpy_django.config import REACTPY_CLEAN_INTERVAL
 
-        self.dispatcher.cancel()
-
-        # Update the component's last_accessed timestamp
-        if self.component_session:
-            try:
-                await self.component_session.asave()
-            except Exception:
-                await asyncio.to_thread(
-                    _logger.error,
-                    f"ReactPy has failed to save component session!\n{traceback.format_exc()}",
-                )
+        # Cancel all running component rendering tasks
+        if self.threaded:
+            # Schedule cancellation within the backhaul event loop, where
+            # the real asyncio.Task objects live. Clear the dict there
+            # too to avoid a cross-thread race with component_tasks.
+            async def _cancel_threaded():
+                for task_id in list(self.component_tasks.keys()):
+                    task = self.component_tasks.get(task_id)
+                    if isinstance(task, asyncio.Task):
+                        task.cancel()
+                self.component_tasks.clear()
+
+            asyncio.run_coroutine_threadsafe(_cancel_threaded(), BACKHAUL_LOOP)
+        else:
+            for task in self.component_tasks.values():
+                task.cancel()
+            self.component_tasks.clear()
+
+        # Save all component sessions
+        for session in self.component_sessions.values():
+            if session:
+                try:
+                    await session.asave()
+                except Exception:
+                    await asyncio.to_thread(
+                        _logger.error,
+                        f"ReactPy has failed to save component session!\n{traceback.format_exc()}",
+                    )
+        self.component_sessions.clear()
+        self.component_queues.clear()
 
         # Queue a cleanup, if needed
         if REACTPY_CLEAN_INTERVAL is not None:
@@ -124,11 +140,40 @@ async def disconnect(self, code: int) -> None:
         await super().disconnect(code)
 
     async def receive_json(self, content: Any, **_) -> None:
-        """Receive a message from the browser. Typically, messages are event signals."""
-        if self.threaded:
-            asyncio.run_coroutine_threadsafe(self.recv_queue.put(content), BACKHAUL_LOOP)
-        else:
-            await self.recv_queue.put(content)
+        """Receive a message from the browser.
+
+        Handles two message types:
+        - ``mount-component``: Start a new component rendering task.
+        - ``layout-event`` (rootId present): Route the event to the
+          specific component's event queue.
+        """
+        if content.get("type") == "mount-component":
+            if self.threaded:
+                if not BACKHAUL_THREAD.is_alive():
+                    await asyncio.to_thread(_logger.debug, "Starting ReactPy backhaul thread.")
+                    BACKHAUL_THREAD.start()
+
+                # Schedule within the backhaul loop so we store an asyncio.Task,
+                # allowing proper task.cancel() (unlike concurrent.futures.Future).
+                async def _threaded_run():
+                    task = asyncio.create_task(self._run_component(content))
+                    self.component_tasks[content["rootId"]] = task
+                    try:
+                        await task
+                    finally:
+                        self.component_tasks.pop(content["rootId"], None)
+
+                asyncio.run_coroutine_threadsafe(_threaded_run(), BACKHAUL_LOOP)
+            else:
+                task = asyncio.create_task(self._run_component(content))
+                self.component_tasks[content["rootId"]] = task
+        elif content.get("rootId"):
+            root_id = content["rootId"]
+            if root_id in self.component_queues:
+                if self.threaded:
+                    asyncio.run_coroutine_threadsafe(self.component_queues[root_id].put(content), BACKHAUL_LOOP)
+                else:
+                    await self.component_queues[root_id].put(content)
 
     @classmethod
     async def decode_json(cls, text_data):
@@ -138,9 +183,14 @@ async def decode_json(cls, text_data):
     async def encode_json(cls, content):
         return orjson.dumps(content).decode()
 
-    async def run_dispatcher(self):
-        """Runs the main loop that performs component rendering tasks."""
-        # TODO: Figure out why exceptions raised in this method are not being printed to the console.
+    async def _run_component(self, content: dict[str, Any]) -> None:
+        """Construct a component and run its ``serve_layout`` loop.
+
+        Each component gets its own event queue, isolated scope, and runs
+        independently within the shared WebSocket connection. Layout updates
+        are tagged with a ``rootId`` so the client can route them to the
+        correct component.
+        """
         from reactpy_django import models
         from reactpy_django.auth.components import auth_manager, root_manager
         from reactpy_django.config import (
@@ -148,51 +198,67 @@ async def run_dispatcher(self):
             REACTPY_SESSION_MAX_AGE,
         )
 
-        scope = self.scope
-        self.dotted_path = scope["url_route"]["kwargs"]["dotted_path"]  # type: ignore[reportTypedDictNotRequiredAccess]
-        uuid = scope["url_route"]["kwargs"].get("uuid")  # type: ignore[reportTypedDictNotRequiredAccess]
-        has_args = scope["url_route"]["kwargs"].get("has_args")  # type: ignore[reportTypedDictNotRequiredAccess]
-        scope["reactpy"] = {"id": str(uuid)}  # type: ignore[reportGeneralTypeIssues]
-        query_string = parse_qs(scope["query_string"].decode(), strict_parsing=True)
-        http_path = query_string.get("path", [""])[0]
-        http_query_string = query_string.get("qs", [""])[0]
-        self.recv_queue = asyncio.Queue()
-        connection = Connection(  # For `use_connection`
-            scope=cast("dict[str, Any]", scope),
-            location=Location(path=http_path, query_string=http_query_string),
-            carrier=self,
-        )
+        root_id: str = content["rootId"]
+        dotted_path: str = content["dottedPath"]
+        uuid: str = content.get("componentUuid", root_id)
+        has_args: bool = content.get("hasArgs", False)
+
+        # Maintain backward compatibility for user code that checks
+        # ws.carrier.dotted_path. This is inherently racy when multiple
+        # components are active on the same WebSocket; store it locally
+        # so at least the value is correct for the currently-running component.
+        self.dotted_path = dotted_path
+
+        # Each component needs its own isolated scope copy to prevent concurrent
+        # component tasks from overwriting each other's scope["reactpy"] entries.
+        scope = copy.copy(self.scope)
+        scope["reactpy"] = {"id": uuid}
         now = timezone.now()
         component_session_args: Sequence[Any] = ()
         component_session_kwargs: MutableMapping[str, Any] = {}
 
+        # Re-parse the page-level path and query string from the WebSocket URL.
+        # This ensures that even after a reconnect (which creates a new consumer
+        # with an updated query string), components are rendered with the correct
+        # current page location.
+        query_string = parse_qs(self.scope["query_string"].decode(), strict_parsing=True)
+        page_path = query_string.get("path", [""])[0] or "/"
+        page_query_string = query_string.get("qs", [""])[0]
+
+        connection = Connection(
+            scope=cast("dict[str, Any]", scope),
+            location=Location(path=page_path, query_string=page_query_string),
+            carrier=self,
+        )
+
         # Verify the component has already been registered
         try:
-            root_component_constructor = REACTPY_REGISTERED_COMPONENTS[self.dotted_path]
+            root_component_constructor = REACTPY_REGISTERED_COMPONENTS[dotted_path]
         except KeyError:
             await asyncio.to_thread(
                 _logger.warning,
-                f"Attempt to access invalid ReactPy component: {self.dotted_path!r}",
+                f"Attempt to access invalid ReactPy component: {dotted_path!r}",
             )
             return
 
-        # Construct the component. This may require fetching the component's args/kwargs from the database.
+        # Construct the component. This may require fetching the component's
+        # args/kwargs from the database.
         try:
             if has_args:
-                self.component_session = await models.ComponentSession.objects.aget(
+                component_session = await models.ComponentSession.objects.aget(
                     uuid=uuid,
                     last_accessed__gt=now - timedelta(seconds=REACTPY_SESSION_MAX_AGE),
                 )
-                params: ComponentParams = dill.loads(self.component_session.params)
+                params: ComponentParams = dill.loads(component_session.params)
                 component_session_args = params.args
                 component_session_kwargs = params.kwargs
+                self.component_sessions[root_id] = component_session
 
-            # Generate the initial component instance
             root_component = root_component_constructor(*component_session_args, **component_session_kwargs)
         except models.ComponentSession.DoesNotExist:
             await asyncio.to_thread(
                 _logger.warning,
-                f"Component session for '{self.dotted_path}:{uuid}' not found. The "
+                f"Component session for '{dotted_path}:{uuid}' not found. The "
                 "session may have already expired beyond REACTPY_SESSION_MAX_AGE. "
                 "If you are using a custom `host`, you may have forgotten to provide "
                 "args/kwargs.",
@@ -207,6 +273,15 @@ async def run_dispatcher(self):
             )
             return
 
+        # Create a dedicated event queue for this component
+        recv_queue: asyncio.Queue = asyncio.Queue()
+        self.component_queues[root_id] = recv_queue
+
+        # Wrap outgoing messages with the rootId so the client can route them
+        async def send_wrapper(message: Any) -> None:
+            message["rootId"] = root_id
+            await self.send_json(message)
+
         # Start the ReactPy component rendering loop
         with contextlib.suppress(Exception):
             await serve_layout(
@@ -217,6 +292,14 @@ async def run_dispatcher(self):
                         value=connection,
                     )
                 ),
-                self.send_json,
-                self.recv_queue.get,
+                send_wrapper,
+                recv_queue.get,
             )
+
+        # Cleanup after the component rendering loop finishes.
+        # In threaded mode _threaded_run already cleaned up component_tasks;
+        # in direct mode we do it here.
+        self.component_queues.pop(root_id, None)
+        self.component_sessions.pop(root_id, None)
+        if not self.threaded:
+            self.component_tasks.pop(root_id, None)
diff --git a/src/reactpy_django/websocket/paths.py b/src/reactpy_django/websocket/paths.py
index 65346b83..24d00de4 100644
--- a/src/reactpy_django/websocket/paths.py
+++ b/src/reactpy_django/websocket/paths.py
@@ -4,7 +4,7 @@
 from reactpy_django.websocket.consumer import ReactpyAsyncWebsocketConsumer
 
 REACTPY_WEBSOCKET_ROUTE = path(
-    f"{REACTPY_URL_PREFIX}/<str:dotted_path>/<uuid:uuid>/<int:has_args>/",
+    f"{REACTPY_URL_PREFIX}/",
     ReactpyAsyncWebsocketConsumer.as_asgi(),  # type: ignore
 )
 """A URL path for :class:`ReactpyAsyncWebsocketConsumer`.