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
You're using useSubmission outside of <Router> Make a separate component that is a child of <Router> and use useSubmission within it
flashblaze
flashblazeOP4w ago
Damn. That did it. Thanks!
TaQuanMinhLong
:Worry_CoffeeSmile:
Want results from more Discord servers?
Add your server