您不应该在 Piral 中的 <Router> 之外使用 <Link>

Question

在默认 Piral 实例中调试我的 Pilet 时出现此错误：

const params = new URLSearchParams();
params.append('firstName', 'paul');
params.append('lastName', 'fred');
axios.post('/user', params);

奇怪的是下一个日志条目报告错误来自内部一个Uncaught Error: Invariant failed: You should not use <Link> outside a <Router> ：

Router

我的pilet index.jsx：

react_devtools_backend.js:2430 The above error occurred in the <Context.Consumer> component:
    in Link
    in Unknown
    in Suspense (created by ErrorBoundary)
    in ErrorBoundary
    in Unknown (created by Menu)
    in li (created by MenuItem)
    in MenuItem
    in Unknown (created by Menu)
    in ul (created by MenuContainer)
    in div (created by MenuContainer)
    in div (created by MenuContainer)
    in nav (created by MenuContainer)
    in header (created by MenuContainer)
    in MenuContainer
    in Unknown (created by Menu)
    in Menu (created by Layout)
    in div (created by Layout)
    in Layout
    in Unknown (created by PiralContent)
    in PiralContent (created by PiralView)
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Unknown (created by PiralView)
    in PiralProvider (created by PiralView)
    in PiralView (created by Piral)
    in Piral

我的 Piral 实例使用 import { Link } from 'react-router-dom' const App = () => 'My pilet' export function setup(app) { app.registerPage('/my-pilet', App) app.registerMenu(() => <Link to="/my-pilet">My Pilet</Link>) } 提供的样板文件并且完全没有变化。它甚至有一个默认菜单项，可以正常工作而不会出错：

（“未找到”是 Piral 提供的默认菜单项）

为什么我会收到此错误？

• 盗版 0.12.4
• 海盗 CLI 0.12.4
• 海盗 CLI Webpack 0.12.4

Answer 1

您的设置一定有问题。如果出现此错误，则表示您的 Link 的路由上下文与应用外壳中的路由上下文不同。我怀疑您不共享 react-router-dom。把它放在你的 Pilet 的 package.json 的 peerDependencies 中。

Answer 2

错误是不言自明的，您只需要将 与 Router 标签括起来。试试这个：

import { BrowserRouter as Router, Link } from 'react-router-dom'

const App = () => 'My pilet'

export function setup(app) {
  app.registerPage('/my-pilet', App)
  app.registerMenu(() => <Router> <Link to="/my-pilet">My Pilet</Link> <Router>)
}

来源：https://reactrouter.com/web/example/url-params