olaren.dev
washes u
feat: proper routing between pages
+17
-20
src/Home.tsx
+17
-20
src/Home.tsx
···
16
16
};
17
17
18
18
return (
19
-
<div class="max-w-xl w-full p-5">
20
-
<h1 class="text-3xl font-bold mb-10">Washing Machine</h1>
21
-
<form class="flex-row" on:submit={onSubmit}>
22
-
<label for="handle" class="text-neutral-500 text-sm">
23
-
Handle
24
-
</label>
25
-
<div class="flex text-xl">
26
-
<input
27
-
name="handle"
28
-
required
29
-
autofocus
30
-
class="bg-slate-300 p-2 w-full"
31
-
type="search"
32
-
/>
33
-
<button class="bg-slate-800 text-neutral-200 py-2 px-4" type="submit">
34
-
Wash
35
-
</button>
36
-
</div>
37
-
</form>
38
-
</div>
19
+
<form class="flex-row" on:submit={onSubmit}>
20
+
<label for="handle" class="text-neutral-500 text-sm">
21
+
Handle
22
+
</label>
23
+
<div class="flex text-xl">
24
+
<input
25
+
name="handle"
26
+
required
27
+
autofocus
28
+
class="bg-slate-300 p-2 w-full"
29
+
type="search"
30
+
/>
31
+
<button class="bg-slate-800 text-neutral-200 py-2 px-4" type="submit">
32
+
Wash
33
+
</button>
34
+
</div>
35
+
</form>
39
36
);
40
37
};
41
38
+15
src/Wash.tsx
+15
src/Wash.tsx
···
1
+
// @ts-types="solid-js"
2
+
import { Component } from "solid-js";
3
+
import { useParams } from "@solidjs/router";
4
+
5
+
const Wash: Component = () => {
6
+
const params = useParams();
7
+
8
+
return (
9
+
<div>
10
+
<p>Washing {params.handle} :3</p>
11
+
</div>
12
+
);
13
+
};
14
+
15
+
export default Wash;
+16
src/components/Layout.tsx
+16
src/components/Layout.tsx
···
1
+
// @ts-types="solid-js"
2
+
import { Component } from "solid-js";
3
+
import { A, RouteSectionProps } from "@solidjs/router";
4
+
5
+
const Layout: Component<RouteSectionProps> = (props) => {
6
+
return (
7
+
<div class="max-w-xl w-full p-5">
8
+
<A href="/">
9
+
<h1 class="text-3xl font-bold mb-10">Washing Machine</h1>
10
+
</A>
11
+
{props.children}
12
+
</div>
13
+
);
14
+
};
15
+
16
+
export default Layout;
+4
-2
src/index.tsx
+4
-2
src/index.tsx
···
5
5
6
6
import Home from "./Home.tsx";
7
7
import { Route, Router } from "@solidjs/router";
8
+
import Wash from "./Wash.tsx";
9
+
import Layout from "./components/Layout.tsx";
8
10
9
11
const root = document.getElementById("root");
10
12
···
16
18
17
19
render(
18
20
() => (
19
-
<Router>
21
+
<Router root={Layout}>
20
22
<Route path="/" component={Home} />
21
-
<Route path="/wash/:handle" component={() => <p>:3</p>} />
23
+
<Route path="/wash/:handle" component={Wash} />
22
24
</Router>
23
25
),
24
26
root!,