0

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:

enter image description here

(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
jared_hexagon
  • 175
  • 1
  • 1
  • 10

2 Answers2

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.

Florian Rappl
  • 3,041
  • 19
  • 25
  • If this is a scaffolded pilet (via `pilet new` or `npm init pilet`) and the peer dependency is missing let us know. This should not be the case. When you scaffold the setup should be done such that this just works. – Florian Rappl Jan 26 '21 at 22:51
  • My pilet wasn't scaffolded and I made it myself so I was missing all of the peer dependencies. Thanks – jared_hexagon Jan 27 '21 at 01:15
  • 1
    Alright thanks for clarifying! We leave it to developers to decide which dependencies they want to share (and which of the shared dependencies they want to actually use). As such you could even bring your own React (or React Router to stay on topic) with your pilet. Its not our recommendation, but it may make sense. – Florian Rappl Jan 27 '21 at 10:00
-1

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

Zaki
  • 107
  • 9