尝试在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，但是当我单击它们中的任何一个时，出现了一个运行时错误：

未处理运行时错误

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

./node_modules/@gatsbyjs/reach-router/es/index.js:698中函数eval中的错误

无法读取未定义的属性“路径”

./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 |

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

Update：按照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/仍然存在。

Update：尝试添加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之后，页面可以再次加载。此时单击Home Link不会触发任何错误。

Answer 1

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

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

// 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)。