SolidJSS
SolidJS•14mo ago•
4 replies
flashblaze

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;


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