#How to use useSubmission in layout?

4 messages · Page 1 of 1 (latest)

uneven bay
#

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;

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

latent condor
#

You're using useSubmission outside of <Router>

#

Make a separate component that is a child of <Router> and use useSubmission within it

uneven bay