Lithophone, originally a pre-historic musical instrument consisting of a rock or pieces of rock, granite, fossilized coral, petrified wood and other melodious stones, that are played by striking them. Sounding stones made of basalt, granite, marble and other minerals were used in many ancient cultures for ceremonial and religious purposes.
https://www.youtube.com/watch?v=KVvXv1Z6EY8
© WildMedia/Shutterstock
© Wikipedia
© Horia Merla/Getty Images
© Ernst Dirksen/Minden Pictures
class User(Base):
__tablename__ = "user"
id: Mapped[int] = mapped_column(init=False, autoincrement=True, primary_key=True)
user_metadata: Mapped[JSONB] = mapped_column(
JSONB, nullable=False
)
createBrowserRouter | BrowserRouter |
|---|---|
Part of React Router's data router API (v6.4+) | Traditional component-based router |
Configured with a JavaScript object | Configured with JSX components |
Better for data-driven apps (loaders, actions) | Simpler for basic routing |
Feature | createBrowserRouter | BrowserRouter |
|---|---|---|
Route Definition | Object configuration | JSX components |
Data Loading | Built-in | Requires external state management |
Scroll Restoration | Automatic (or via | Manual implementation needed |
Error Handling | Built-in error boundaries | Custom error handling |
Code Splitting | Easier with | Requires more setup |
createBrowserRouter (Data Router)
// 1. Create router configuration
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
loader: () => fetchData(), // Built-in data loading
children: [
{
path: "dashboard",
element: <Dashboard />,
errorElement: <ErrorPage /> // Built-in error boundary
}
]
}
]);
// 2. Use in app
function App() {
return <RouterProvider router={router} />;
}
BrowserRouter (Component Router)
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
createBrowserRouter if:loader/action)BrowserRouter if:createBrowserRouter{
path: "/users",
element: <Users />,
loader: async () => {
const users = await fetchUsers();
return users;
}
}
{
path: "/new-post",
element: <NewPost />,
action: async ({ request }) => {
const formData = await request.formData();
return createPost(formData);
}
}
test
source: IncredibleIndia
If you want to see the state.data you'll have to do console.log as follows:
import { current } from "@reduxjs/toolkit";
console.log("state.data", current(state.data));reference:
/** Takes a snapshot of the current state of a draft and finalizes it (but without freezing). This is a great utility to print the current state during debugging (no Proxies in the way). The output of current can also be safely leaked outside the producer. */
declare function current<T>(value: T): T;
op