javascript Svelte SPA路由器-无效组件对象错误

我使用的是SvelteKit和svelte-spa-router。
我的文件结构如下所示：

src/
├─ assets/
├─ lib/
│  ├─ Navbar.svelte
│  ├─ Sidebar.svelte
├─ routes/
│  ├─ about/
│  │  ├─ index.svelte
│  ├─ contact/
│  │  ├─ index.svelte
│  ├─ products/
│  │  ├─ index.svelte
│  ├─ Test.svelte
│  ├─ index.svelte
│  ├─ __layout.svelte
├─ app.css
├─ app.html

__布局，苗条：*

(As按照上面链接中的示例。）

<script>
  import Router from 'svelte-spa-router'
  import Navbar from "$lib/Navbar.svelte";
  import Sidebar from "$lib/Sidebar.svelte";
  import Home from './index.svelte'
  import About from './about/index.svelte'
  import Contact from './contact/index.svelte'
  import Products from './products/index.svelte'
  import Test from './Test.svelte';

  const routes = {
    // Exact path
    '/': Home,
    '/about': About,
    '/contact': Contact,
    '/products': Products,
    '/test': Test
  }
</script>

<Navbar />

<Sidebar />

<Router {routes} />

<style>
</style>

- 错误：**

Error: Invalid component object
    at new RouteItem (Router.svelte:303:23)
    at Router.svelte:432:28
    at Array.forEach (<anonymous>)
    at Router.svelte:431:31
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:62:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)

- 控制台：**

如果我删除<Router {routes} />并使用<slot></slot>，则一切正常。
关于这个错误，我唯一找到的是Router.svelte的this GitHub源代码（#301行），但没有多大帮助。
我尝试像示例中那样更改组件的名称，但仍然抛出错误（我想可能是因为它们的名称都相同，这可能是一个bug，我不知道...）。
通过localhost:3000/[path]手动导航也会抛出错误，包括/test路径，它与__layout.svelte在同一路径中。我提到后者是因为在我提供的第一个链接中，作者说：
要显示路由器，在一个苗条的组件（通常是App. svelte）中，首先导入路由器组件...
通常从我所看到的例子中，您通常放在App.svelte中的结构会默认放在__layout.svelte中，然后作为"Home "/" Landing"页面的index.svelte会自动放在位于__layout.svelte中的<slot />（以及您可能拥有的任何其他路径）中。
最后但并非最不重要的是，动态导入它们也不起作用。请参阅--〉编辑3
我知道我尝试过的很多方法可能与问题无关，但问题本身对我来说毫无意义。比如，为什么组件作为Router不理解的类型的对象传递？Test.svelte实际上只有<h1>TEST COMPONENT</h1>。

- 编辑：**

将以下代码添加到我的__layout.svelte的<script></script>部分：

// Contains logging information used by tests
let logbox = ''
// Handles the "conditionsFailed" event dispatched by the router when a component can't be loaded because one of its pre-condition failed
function conditionsFailed(event) {
  // eslint-disable-next-line no-console
  console.error('Caught event conditionsFailed', event.detail)
  logbox += 'conditionsFailed - ' + JSON.stringify(event.detail) + '\n'
  // Replace the route
  replace('/wild/conditions-failed')
}
// Handles the "routeLoaded" event dispatched by the router after a route has been successfully loaded
function routeLoaded(event) {
  // eslint-disable-next-line no-console
  console.info('Caught event routeLoaded', event.detail)
  logbox += 'routeLoaded - ' + JSON.stringify(event.detail) + '\n'
}
// Handles the "routeLoading" event dispatched by the router whie a route is being loaded
// If the route is dynamically imported, such as with the `import()` syntax, then there might be a delay before the route is loaded
function routeLoading(event) {
  // eslint-disable-next-line no-console
  console.info('Caught event routeLoading', event.detail)
  logbox += 'routeLoading - ' + JSON.stringify(event.detail) + '\n'
}
// Handles event bubbling up from nested routes
function routeEvent(event) {
  // eslint-disable-next-line no-console
  console.info('Caught event routeEvent', event.detail)
  logbox += 'routeEvent - ' + JSON.stringify(event.detail) + '\n'
}

然后我在它下面放了下面的代码，如this test example所示：

<Router 
  {routes} 
  on:conditionsFailed={conditionsFailed}
  on:routeLoaded={routeLoaded}
  on:routeLoading={routeLoading}
  on:routeEvent={routeEvent}
/>

这些都没有被调用，只有上面图片中看到的红色控制台消息。

- 编辑2：**

按照Thomas Hennes的建议，我在__layout.svelte文件中分别用每个组件替换了<Router {routes} />，如下所示：

<script>
  import Router from 'svelte-spa-router'
  import Navbar from "$lib/Navbar.svelte";
  import Sidebar from "$lib/Sidebar.svelte";
  import Home from './index.svelte'
  import About from './about/index.svelte'
  import Contact from './contact/index.svelte'
  import Products from './products/index.svelte'
  import Test from './Test.svelte';

  const routes = {
    // Exact path
    '/': Home,
    //'/about': About,
    //'/contact': Contact,
    //'/products': Products,
    //'/test': Test
  }
</script>

<Navbar />

<Sidebar />

<Routes {routes} />

<style>
</style>

他们都没有工作。

- 编辑3：**

有趣的是，我注意到动态导入路由会使我的本地服务器崩溃。xD

const routes = {
  // Exact path
  '/': wrap({
        asyncComponent: () => import('./index.svelte')
  }),
  '/about': wrap({
        asyncComponent: () => import('./about/index.svelte')
  }),
  '/contact': wrap({
        asyncComponent: () => import('./contact/.svelte')
  }),
  '/products': wrap({
        asyncComponent: () => import('./products/.svelte')
  }),
  '/test': wrap({
        asyncComponent: () => import('./Test.svelte')
  }),
}

无论我导入的是哪一个，如果我只导入其中一个还是同时导入所有的，都没有关系。
以下是此冒险的控制台输出：

window is not defined
ReferenceError: window is not defined
    at getLocation (Router.svelte:38:31)
    at start (Router.svelte:59:23)
    at Object.subscribe ([Path to project]/node_modules/svelte/store/index.js:51:20)
    at Router.svelte:493:36
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:112:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)
history is not defined
ReferenceError: history is not defined
    at Router.svelte:455:10
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:112:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)
    at render_response (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:561:28)
    at async respond_with_error (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:1148:10)
    at async respond$1 (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:1392:4)
/node_modules/svelte-spa-router/Router.svelte:413
            const match = routesList[i].match(newLoc.location);
                                                     ^

TypeError: Cannot read properties of null (reading 'location')
    at eval (/node_modules/svelte-spa-router/Router.svelte:413:45)
    at Object.subscribe ([Path to project]/node_modules/svelte/store/index.js:53:9)
    at eval (/node_modules/svelte-spa-router/Router.svelte:406:29)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:112:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)
    at render_response (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:561:28)

javascript Svelte SPA路由器-无效组件对象错误

2条答案

相关问题

热门标签

最新问答