zhiyanzhaijie
zhiyanzhaijie
PostsComments
SSolidJS
Created by zhiyanzhaijie on 12/25/2023 in #support
Need help in solid-router
my development ryan 
{
  "@solidjs/router": "^0.10.5",
  "solid-js": "^1.8.7"
}
{
  "@solidjs/router": "^0.10.5",
  "solid-js": "^1.8.7"
}
The mess confusednick I tried to use useRoutes in Config Based Routing style, and i figured out it's no longer support in ^0.10.0. So i change my code like this: In index.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.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 useRoutes it works, but i can't use it anymore. So is there another wayšŸ‘€ ?
4 replies