为什么所有路线都需要装载机?

问题描述 投票:0回答:1

我正在尝试建立一个新的 Remix 项目,并且我正在尝试测试嵌套路由,但是我访问的每条路由都会给我相同的错误:

'You made a GET request to "/" but did not provide a `loader` for route "routes/Banking", so there is no way to handle the request.'

这是我当前的设置:

  • root.tsx
import type { LinksFunction } from "@remix-run/node";
import { Links, LiveReload, Outlet } from "@remix-run/react";

import stylesheet from "./tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

export default function Root() {
  return (
    <html lang="en">
      <head>
        <Links />
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
      </head>
      <body>
          <Outlet />
          <LiveReload />
      </body>
    </html>
  );
}
  • 路线/index.tsx
import { Outlet } from "@remix-run/react"
import { Navbar } from "~/routes/navbar/navbar"

export const Index = () => {
    return (
        <>
           <Navbar />
           <Outlet />
        </>
    )
}
  • remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true,
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  serverModuleFormat: "cjs",
  future: {
    v2_dev: true,
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

我尝试将 V2_routeConvention 设置为 false。我尝试过使用“index.tsx”和“_index.tsx”。

reactjs typescript routes tailwind-css remix
1个回答
1
投票

我也有类似的问题。对我来说,解决方案是我错误地在函数定义中遗漏了“默认”:

原文:

export function ComponentName() {
...
}

当我将其更改为:

export default function ComponentName() {
...
}

成功了。

我想知道你是否将定义更改为

export const function Index = () => { ...function logic };
export default Index; // export it this way.

会起作用吗?

© www.soinside.com 2019 - 2024. All rights reserved.