You should not use <Link> outside a <Router> in Piral

Question

I get this error when debugging my pilet inside the default Piral instance:

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

The weird thing is the next log entry reports that the error is coming from inside a 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

My pilet 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>)
}

My Piral instance uses the boilerplate provided by piral-cli and is completely unchanged. It even has a default menu item that works correctly without an error:

(the "Not Found" is the default menu item provided by Piral)

Why am I getting this error?

• Piral 0.12.4
• Piral CLI 0.12.4
• Piral CLI Webpack 0.12.4

Answer 1

Something must be wrong with your setup. If this error appears it means that your Link has a different routing context than the one from the app shell. My suspicion is that you do not share react-router-dom. Put this in the peerDependencies of the package.json of your pilet.

Answer 2

The error is self explanatory, you just need to enclose <Link .. /> with Router tags. Try this:

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>)
}

Source: https://reactrouter.com/web/example/url-params