Update 8 files

sandpack-client/src/clients/node/index.ts

@@ -219,7 +219,15 @@ export class SandpackNode extends SandpackClient {
 
   private async setLocationURLIntoIFrame(): Promise<void> {
     if (this.iframePreviewUrl) {
-      await loadPreviewIframe(this.iframe, this.iframePreviewUrl);
+      const startRouteWithoutSlash = (
+        this.iframe.dataset.startRoute ?? "/"
+      ).replace(/^\/+/, "");
+      const previewUrlWithoutSlash = this.iframePreviewUrl.replace(/\/+$/, "");
+
+      const urlWithStartRouter =
+        previewUrlWithoutSlash + "/" + startRouteWithoutSlash;
+
+      await loadPreviewIframe(this.iframe, urlWithStartRouter);
     }
   }
 

sandpack-client/src/clients/runtime/index.ts

@@ -152,8 +152,16 @@ export class SandpackRuntime extends SandpackClient {
       ? new URL(this.options.startRoute, this.bundlerURL).toString()
       : this.bundlerURL;
 
-    this.iframe.contentWindow?.location.replace(urlSource);
-    this.iframe.src = urlSource;
+    const startRouteWithoutSlash = (
+      this.iframe.dataset.startRoute ?? "/"
+    ).replace(/^\/+/, "");
+    const previewUrlWithoutSlash = urlSource.replace(/\/+$/, "");
+
+    const urlWithStartRouter =
+      previewUrlWithoutSlash + "/" + startRouteWithoutSlash;
+
+    this.iframe.contentWindow?.location.replace(urlWithStartRouter);
+    this.iframe.src = urlWithStartRouter;
   }
 
   destroy(): void {

sandpack-client/src/clients/static/index.ts

@@ -45,6 +45,7 @@ export class SandpackStatic extends SandpackClient {
         if (!content) {
           content = this.getIndexContent(filepath);
         }
+
         const isHTMLFilePath =
           filepath.endsWith(".html") ||
           filepath.endsWith(".htm") ||
@@ -143,7 +144,16 @@ export class SandpackStatic extends SandpackClient {
     this.files = new Map(Object.entries(files));
 
     const previewUrl = await this.previewController.initPreview();
-    this.iframe.setAttribute("src", previewUrl);
+
+      const startRouteWithoutSlash = (
+      this.iframe.dataset.startRoute ?? "/"
+    ).replace(/^\/+/, "");
+    const previewUrlWithoutSlash = previewUrl.replace(/\/+$/, "");
+
+    const urlWithStartRouter =
+      previewUrlWithoutSlash + "/" + startRouteWithoutSlash;
+
+    this.iframe.setAttribute("src", urlWithStartRouter);
 
     this.dispatch({ type: "done", compilatonError: false });
     this.dispatch({

sandpack-react/src/components/Console/Console.stories.tsx

@@ -203,8 +203,8 @@ export const MaxMessageCount = () => {
         <SandpackLayout>
           <SandpackCodeEditor />
           <SandpackConsole
-            standalone
             maxMessageCount={Number(maxMessageCount)}
+            standalone
           />
         </SandpackLayout>
         <div
@@ -225,9 +225,9 @@ export const MaxMessageCount = () => {
           <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
             <span>Max Message Count</span>
             <input
+              onChange={(e) => setMaxMessageCount(+e.target.value)}
               type="number"
               value={maxMessageCount}
-              onChange={(e) => setMaxMessageCount(+e.target.value)}
             />
           </label>
         </div>

sandpack-react/src/components/Navigator/index.tsx

@@ -48,19 +48,21 @@ const inputClassName = css({
 export interface NavigatorProps {
   clientId: string;
   onURLChange?: (newURL: string) => void;
+  startRoute?: string;
 }
 
 export const Navigator = ({
   clientId,
   onURLChange,
   className,
+  startRoute,
   ...props
 }: NavigatorProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
   const [baseUrl, setBaseUrl] = React.useState<string>("");
   const { sandpack, dispatch, listen } = useSandpack();
 
   const [relativeUrl, setRelativeUrl] = React.useState<string>(
-    sandpack.startRoute ?? "/"
+    startRoute ?? sandpack.startRoute ?? "/"
   );
 
   const [backEnabled, setBackEnabled] = React.useState(false);

sandpack-react/src/components/Preview/Preview.stories.tsx

@@ -27,6 +27,45 @@ const code = `export default function Kitten() {
   );
 }`;
 
+export const MultipleRoutePreviews: React.FC = () => {
+  const multiRoutePreviewCode = `
+    import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+    const router = createBrowserRouter([
+      { path: "/", element: <div>Home!</div> },
+      { path: "/about", element: <div>About!</div> },
+      { path: "/careers", element: <div>Careers!</div> },
+    ]);
+    export default function MultiRoutePreviews() {
+      return <RouterProvider router={router} />;
+    }
+  `;
+
+  return (
+    <SandpackProvider
+      files={{
+        "/App.js": multiRoutePreviewCode,
+        "package.json": JSON.stringify({
+          dependencies: {
+            react: "^18.0.0",
+            "react-dom": "^18.0.0",
+            "react-scripts": "^4.0.0",
+            "react-router-dom": "^6.10.0",
+          },
+          main: "/index.js",
+        }),
+      }}
+      options={{ startRoute: "/" }}
+      template="react"
+    >
+      <SandpackLayout>
+        <SandpackPreview showNavigator />
+        <SandpackPreview startRoute="/about" showNavigator />
+        <SandpackPreview startRoute="/careers" showNavigator />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
 export const Component: React.FC = () => (
   <SandpackProvider
     files={{

sandpack-react/src/components/Preview/index.tsx

@@ -35,6 +35,7 @@ export interface PreviewProps {
   showOpenNewtab?: boolean;
   actionsChildren?: JSX.Element;
   children?: JSX.Element;
+  startRoute?: string;
 }
 
 const previewClassName = css({
@@ -104,6 +105,7 @@ export const SandpackPreview = React.forwardRef<
       actionsChildren = <></>,
       children,
       className,
+      startRoute,
       ...props
     },
     ref
@@ -158,13 +160,18 @@ export const SandpackPreview = React.forwardRef<
         {...props}
       >
         {showNavigator && (
-          <Navigator clientId={clientId} onURLChange={handleNewURL} />
+          <Navigator
+            clientId={clientId}
+            onURLChange={handleNewURL}
+            startRoute={startRoute}
+          />
         )}
 
         <div className={classNames(c("preview-container"), previewClassName)}>
           <iframe
             ref={iframe}
             className={classNames(c("preview-iframe"), previewIframe)}
+            data-start-route={startRoute}
             style={{
               // set height based on the content only in auto mode
               // and when the computed height was returned by the bundler

sandpack-react/src/presets/Sandpack.tsx

@@ -245,7 +245,7 @@ export const Sandpack: SandpackInternal = ({
               style={topRowStyle}
             />
           )}
-          
+
           {mode === "tests" && (
             <SandpackTests
               actionsChildren={actionsChildren}