我正在尝试建立一个新的 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.'
这是我当前的设置:
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>
);
}
import { Outlet } from "@remix-run/react"
import { Navbar } from "~/routes/navbar/navbar"
export const Index = () => {
return (
<>
<Navbar />
<Outlet />
</>
)
}
/** @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”。
我也有类似的问题。对我来说,解决方案是我错误地在函数定义中遗漏了“默认”:
原文:
export function ComponentName() {
...
}
当我将其更改为:
export default function ComponentName() {
...
}
成功了。
我想知道你是否将定义更改为
export const function Index = () => { ...function logic };
export default Index; // export it this way.
会起作用吗?