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

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👀 ?

3 Replies

Brendonovich•6mo ago

You'll want to provide your layout as a root-level layout, check out step 2 of the docs: https://github.com/solidjs/solid-router

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - GitHub - solidjs/solid-router: A universal router for Solid inspired by Ember and React Router

zhiyanzhaijie•6mo ago

thx. I fix the error with your help, then I find my routes config is wrong. At the end I trun my code into the below and every thing done. index.tsx

/* @refresh reload */
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'

import './index.css'
import routes from './routers/router'

const root = document.getElementById('root')

render(() =>
  <Router>
    {routes}
  </Router>
, root!)

/* @refresh reload */
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'

import './index.css'
import routes from './routers/router'

const root = document.getElementById('root')

render(() =>
  <Router>
    {routes}
  </Router>
, root!)

routes.tsx

import { lazy } from "solid-js";
import Layout from "../layout.tsx";

const routes = [
  {
    path: '/',
    component: (props:any) => <Layout>{props.children}</Layout>,
    children: [
      {
        path: '/',
        component: lazy(() => import("../view/dashboard/dashboard.tsx"))
      },
      {
        path: '/axum',
        component: lazy(() => import("../view/axum/axum.tsx"))
      },
    ]
  },
  {
    path: '**',
    component: () => <div>404</div>
  }
]

export default routes;

import { lazy } from "solid-js";
import Layout from "../layout.tsx";

const routes = [
  {
    path: '/',
    component: (props:any) => <Layout>{props.children}</Layout>,
    children: [
      {
        path: '/',
        component: lazy(() => import("../view/dashboard/dashboard.tsx"))
      },
      {
        path: '/axum',
        component: lazy(() => import("../view/axum/axum.tsx"))
      },
    ]
  },
  {
    path: '**',
    component: () => <div>404</div>
  }
]

export default routes;

layout.tsx

import { For } from 'solid-js/web';
import less from './layout.module.less'
import { useNavigate } from '@solidjs/router'


export default function Layout(props:any) {
  const nav = useNavigate();

  const menuRoute = [
    {
      name: 'home',
      link: '/'
    },
    {
      name: 'axum',
      link: '/axum'
    }
  ]

  const linkTo = (path: string) => {
    return () => {
      nav(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}>
          {props.children}
        </div>
      </div>
 
  )
}

import { For } from 'solid-js/web';
import less from './layout.module.less'
import { useNavigate } from '@solidjs/router'


export default function Layout(props:any) {
  const nav = useNavigate();

  const menuRoute = [
    {
      name: 'home',
      link: '/'
    },
    {
      name: 'axum',
      link: '/axum'
    }
  ]

  const linkTo = (path: string) => {
    return () => {
      nav(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}>
          {props.children}
        </div>
      </div>
 
  )
}

I wonder if there is a better way like Outlet in react, rather than props.children and (props) => <Comp>{props.children}</Comp>

Brendonovich•6mo ago

solid-router 0.9 used <Outlet>, but props.children is a superior solution

Gaming

Programming

Need help in solid-router