Need help in solid-router
my development dependencies:
{
"@solidjs/router": "^0.10.5",
"solid-js": "^1.8.7"
}{
"@solidjs/router": "^0.10.5",
"solid-js": "^1.8.7"
}The mess is:
I tried to use
useRoutesuseRoutes in Config Based Routing style, and i figured out it's no longer support in ^0.10.0^0.10.0.So i change my code like this:
In index.tsxindex.tsx
/* @refresh reload */
import { render } from 'solid-js/web'
import Layout from './layout'
import './index.css'
const root = document.getElementById('root')
render(() => <Layout />, root!)/* @refresh reload */
import { render } from 'solid-js/web'
import Layout from './layout'
import './index.css'
const root = document.getElementById('root')
render(() => <Layout />, root!)In Layout.tsxLayout.tsx
import { For } from 'solid-js/web';
import less from './layout.module.less'
import { Router, useNavigate } from '@solidjs/router'
import { routes } from './routers/router'; // a route array with lazy comps used
export default function Layout() {
const menuRoute = [
{
name: '้ฆ้กต',
link: '/'
},
{
name: 'axum',
link: '/axum'
}
]
const linkTo = (path: string) => {
// error here: "Make sure your app is wrapped in a <Router />"
const $router = useNavigate();
return () => {
console.log(path)
// $router(path)
}
}
return (
<div class={less.flex}>
<ul class={less.l}>
<For each={menuRoute}>{(r, i) =>
<li onclick={linkTo(r.link)}>{r.name}</li>
}</For>
</ul>
<div class={less.r}>
<Router>{routes}</Router>
</div>
</div>
)
}import { For } from 'solid-js/web';
import less from './layout.module.less'
import { Router, useNavigate } from '@solidjs/router'
import { routes } from './routers/router'; // a route array with lazy comps used
export default function Layout() {
const menuRoute = [
{
name: '้ฆ้กต',
link: '/'
},
{
name: 'axum',
link: '/axum'
}
]
const linkTo = (path: string) => {
// error here: "Make sure your app is wrapped in a <Router />"
const $router = useNavigate();
return () => {
console.log(path)
// $router(path)
}
}
return (
<div class={less.flex}>
<ul class={less.l}>
<For each={menuRoute}>{(r, i) =>
<li onclick={linkTo(r.link)}>{r.name}</li>
}</For>
</ul>
<div class={less.r}>
<Router>{routes}</Router>
</div>
</div>
)
}When using the
useRoutesuseRoutes it works, but i can't use it anymore. So is there another way
?
