How to use useSubmission in layout?

So I have a submit button in my sidebar as such I've created my app.tsx file like so

import { Router, useSubmission } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { MetaProvider } from "@solidjs/meta";

import Header from "./components/ui/Header";
import Sidebar from "./components/ui/Sidebar";
import { createNote } from "./lib";

import "@fontsource/inter";
import "@fontsource-variable/jetbrains-mono";
import "./app.css";

const App = () => {
  const submission = useSubmission(createNote);

  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Suspense>
            <main class="w-full flex flex-col">
              <form action={createNote}>
                <Header />
                <div class="flex">
                  <Sidebar pending={submission.pending} />
                  {props.children}
                </div>
              </form>
            </main>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
};

export default App;

import { Router, useSubmission } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { MetaProvider } from "@solidjs/meta";

import Header from "./components/ui/Header";
import Sidebar from "./components/ui/Sidebar";
import { createNote } from "./lib";

import "@fontsource/inter";
import "@fontsource-variable/jetbrains-mono";
import "./app.css";

const App = () => {
  const submission = useSubmission(createNote);

  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Suspense>
            <main class="w-full flex flex-col">
              <form action={createNote}>
                <Header />
                <div class="flex">
                  <Sidebar pending={submission.pending} />
                  {props.children}
                </div>
              </form>
            </main>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
};

export default App;

However, I'm now getting this error <A> and 'use' router primitives can be only used inside a Route. How can I fix this?

3 Replies

TaQuanMinhLong•5w ago

You're using useSubmission outside of <Router> Make a separate component that is a child of <Router> and use useSubmission within it

flashblazeOP•5w ago

Damn. That did it. Thanks!

TaQuanMinhLong•5w ago

:Worry_CoffeeSmile:

Gaming

Programming

How to use useSubmission in layout?