【React】Recoilでstateをデフォルト値にリセットする

import { atom } from "recoil";
export const textState = atom({ key: "textState", default: "",
});

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RecoilRoot } from "recoil";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Test from "./Test";
const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement
);
const router = createBrowserRouter([ { path: "/", element: <App />, }, { path: "/test", element: <Test />, },
]);
root.render( <React.StrictMode> <RecoilRoot> <RouterProvider router={router} /> </RecoilRoot> </React.StrictMode>
);

import { useResetRecoilState } from "recoil";
import { textState } from "./textState";
import { Link } from "react-router-dom";
const App = () => { const resetState = useResetRecoilState(textState); console.log('App'); return ( <> <div> <Link to="/test">Test</Link> </div> <div> <button onClick={resetState}>stateをリセット</button> </div> </> );
};
export default App;

import { useRecoilState } from "recoil";
import { textState } from "./textState";
import { Link } from "react-router-dom";
const Test = () => { const [text, setText] = useRecoilState(textState); const onChange = (event: React.ChangeEvent<HTMLInputElement>) => { setText(event.target.value); }; console.log('Test'); return ( <> <div> <Link to="/">App</Link> </div> <div> <input type="text" value={text} onChange={onChange} /> <br /> Echo: {text} </div> </> );
};
export default Test;