zhiyanzhaijie Comments - Answer Overflow

zhiyanzhaijie

•Created by zhiyanzhaijie on 12/25/2023 in #support

Need help in solid-router

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>

4 replies

Gaming

Programming