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

Question

在默认Piral实例中调试pilet时，我会得到此错误：

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>

奇怪的是，下一个日志条目报告错误来自Router内部。

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

我的皮莱index.jsx：

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实例使用了piral-cli提供的样板，并且完全没有改变。它甚至有一个正确工作的默认菜单项，没有错误：

​

​

( "Not“是Piral提供的默认菜单项)

我为什么要犯这个错误？

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

Answer 1

你的设置一定有问题。如果出现此错误，则意味着Link的路由上下文与应用程序外壳中的路由上下文不同。我怀疑你不共享react-router-dom。把这个放在你的皮莱特的peerDependencies of package.json中。

Answer 2

错误是不言自明的，您只需将。试试这个：

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