尝试在GatsbyJS中实现仅限客户端的路由时出现运行时错误

Question

我正在努力遵循盖茨比网站上的基本示例。到目前为止，这些是我的代码：

// pages/app.js
import { Router } from '@reach/router';
import { Link } from 'gatsby';
import * as React from 'react';
import Browse from '../components/Browse';
import Upload from '../components/Upload';
const AppPage = () => (
<>
<nav>
<Link to "/app/browse">Browse Link</Link>
<Link to "/app/upload">Upload Link</Link>
</nav>
<main>
<Router basepath="/app">
<Browse path="/browse">Browse</Browse>
<Upload path="/upload">Upload</Upload>
</Router>
</main>
</>
);
export default AppPage;
// components/Browse.tsx
import * as React from 'react';
import { RouteComponentProps } from '@reach/router';
type BrowseProps = {
children?: string,
} & RouteComponentProps;
const Browse = ({ children }: BrowseProps) => <div>{children}</div>;
Browse.defaultProps = {
children: '',
};
export default Browse;
// components/Upload.tsx
// Identical to Browse.tsx, except it's named Upload
type UploadProps {...}
const Upload = ...;
export default Upload;

为了帮助配置仅限客户端的路径，我使用gatsby-plugin-create-client-paths来帮助实现网站上建议的过程自动化。它已添加到gatsby-config.js中，如下所示：

// gatsby-config.js
plugins: [
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-plugin-create-client-paths",
options: {
prefixes: ["/app/*"],
},
},
{
resolve: "gatsby-plugin-manifest",
options: {
icon: "src/images/icon.png",
},
},
]

据我所知，这应该是我让它发挥作用所需要的全部。所以我启动了开发服务器：

npm run develop

我成功地打开了http://localhost:8000/app/，两个Links也被成功渲染，但当我点击其中任何一个时，出现了运行时错误：

未处理的运行时错误

在文件中发现一个未处理的运行时错误。请参阅下面的列表来修复它：

中的函数eval出错/node_modules/@gatsbyjs/rech router/es/index.js:698

无法读取未定义的属性"path">

./node_modules/@gatsbyjs/reach-router/es/index.js:698

696 |       return React.Children.map(element.props.children, createRoute(basepath));
697 |     }
> 698 |     !(element.props.path || element.props.default || element.type === Redirect) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Router>: Children of <Router> must have a `path` or `default` prop, or be a `<Redirect>`. None found on element type `" + element.type + "`") : invariant(false) : void 0;
699 |
700 |     !!(element.type === Redirect && (!element.props.from || !element.props.to)) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Redirect from="" + element.props.from + "" to="" + element.props.to + ""/> requires both "from" and "to" props when inside a <Router>.") : invariant(false) : void 0;
701 |

这是什么意思？我是不是错过了什么？是因为我使用的是开发环境而不是生产环境，导致它失败吗？

更新：根据Ferran的回答，我对代码进行了如下修改，将pages/index.js重构为pages/app/[...].js

// pages/app/[...].js
import { Router } from '@reach/router';
import { Link } from 'gatsby';
import * as React from 'react';
import Browse from '../../components/Browse';
import Upload from '../../components/Upload';
const AppPage = () => (
<>
<nav>
<Link to "/app/browse">Browse Link</Link>
<Link to "/app/upload">Upload Link</Link>
</nav>
<main>
<Router basepath="/app">
<Browse path="/browse">Browse</Browse>
<Upload path="/upload">Upload</Upload>
</Router>
</main>
</>
);
export default AppPage;

所有其他文件保持不变。但是，单击链接后，http://localhost:8000/app/上的错误仍然存在。

更新：尝试添加Home路由：

// pages/app/[...].js
import { Router } from '@reach/router';
import { Link } from 'gatsby';
import * as React from 'react';
import Browse from '../../components/Browse';
import Home from '../../components/Home';
import Upload from '../../components/Upload';
const AppPage = () => (
<>
<nav>
<Link to "/app/">Home Link</Link>
<Link to "/app/browse">Browse Link</Link>
<Link to "/app/upload">Upload Link</Link>
</nav>
<main>
<Router basepath="/app">
<Browse path="/browse">Browse</Browse>
<Upload path="/upload">Upload</Upload>
<Browse path="/">Home</Browse>
</Router>
</main>
</>
);
export default AppPage;

在中添加此项后，在http://localhost:8000/app/处立即触发相同的错误。在移除Home路由而不移除Link之后，页面可以再次加载。此时单击"主页链接"不会触发任何错误。

Answer 1

发生的事情似乎是盖茨比没有找到你的路径。我认为您只需要在src/pages/app/[...].js中移动app.js(将文件重命名为[...].js(。

你可以在他们的GitHub中学习盖茨比的官方例子。盖茨比的文档中的代码表明：

// src/pages/app/[...].js
import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Profile from "../components/Profile"
import Details from "../components/Details"
import Login from "../components/Login"
import Default from "../components/Default"
import PrivateRoute from "../components/PrivateRoute"
const App = () => {
return (
<Layout>
<Router basepath="/app">
<PrivateRoute path="/profile" component={Profile} />
<PrivateRoute path="/details" component={Details} />
<Login path="/login" />
<Default path="/" />
</Router>
</Layout>
)
}
export default App

[...].js表示法使用文件系统路由API，它标记/app之后URL的任何动态段(由于文件夹结构，app/[...].js(。