TypeError on form redirect with useLocation().route() #4865
-
|
I'm attempting to redirect to another page after the user successfully logs in via a form, but I keep getting the below error. [Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'o.context') The line being referred to in main.js is The link I put in Any help would be appreciated. Thanks! index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/[email protected]",
"preact/": "https://esm.sh/[email protected]/",
"preact-iso": "https://esm.sh/[email protected]?external=preact",
"@preact/signals": "https://esm.sh/@preact/[email protected]?external=preact",
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact"
}
}
</script>
</head>
<body>
<main>
<div id="app"></div>
</main>
<script type="module" src="./js/main.js"></script>
</body>
</html>main.js import { render } from 'preact';
import { html } from 'htm/preact';
import {
lazy,
useLocation,
LocationProvider,
ErrorBoundary,
Router,
Route
} from 'preact-iso';
const LogInForm = () => {
const onSubmit = async e => {
e.preventDefault();
let formData = new FormData(e.currentTarget)
console.log(JSON.stringify(Object.fromEntries(formData)));
let res = await fetch("http://localhost:8000/login", {
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(Object.fromEntries(formData)),
});
if (!res.ok) {
const message = "An error has occurred.";
throw new Error(message);
}
let result = await res.json();
console.log(result);
const location = useLocation();
location.route('/search');
};
return html`
<form onSubmit=${onSubmit}>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input name="password" type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
const Home = () => {
return html`
<h1 class="display-1">Log in</h1>
<p><a href="/search">search</a></p>
<${LogInForm}><//>
`;
}
const Search = () => {
return html`
<h1 class="display-1">Search</h1>
`;
}
const App = () => {
return html`
<${LocationProvider}>
<${ErrorBoundary} onError=${e => console.log(e)}>
<${Router}>
<${Home} path="/" />
<${Search} path="/search" />
<//>
<//>
<//>
`;
}
render(
html`<${App} />`,
document.getElementById('app')
); |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
You're violating the rules of hooks, hooks cannot be nested in functions like that. They must be top-level within a component and unconditional.
|
Beta Was this translation helpful? Give feedback.
-
|
I thought I had tried that and it didn't work, but lo and behold that was it. Thanks! |
Beta Was this translation helpful? Give feedback.
You're violating the rules of hooks, hooks cannot be nested in functions like that. They must be top-level within a component and unconditional.
useLocationis a hook, as is anything starting withuse.