I've created an NPM package that renders an icon menu (which will be used in various projects). The user is allowed to send a 'route' prop to that icon menu. Thus, each icon can be a link to a different page.
However, I keep getting the following error when I'm importing my package:
Error: Invariant failed: You should not use
<Link>
outside a<Router>
Even though I import and render my icon menu inside a router of my project. Or, in this case, a BrowserRouter.
Because it's a huge project, I've quickly recreated the process in two parts. Remember, the package is an NPM package. If it was a component inside my project this wouldn't have been a problem. However, I need this package in different, identical projects.
Part 1: The NPM package
IconMenu.js
import React from 'react';
import Icon from '@IDB/react-iconlibrary';
import { Link } from 'react-router-dom';
const IconMenu = ({ items }) => {
return (
<div className='icon_menu'>
{items.map((item, index) => (
<Link to={item.route}>
<Icon className='icon_box_icon' key={index} name={item.icon} title={item.name} />
</Link>
))}
</div>
)
}
export default IconMenu
Part 2: The project
Project.js
import { IconMenu } from '@IDB/ui-elements';
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
export default class Project extends Component {
render () {
return (
<BrowserRouter>
<div id='page'>
<Route path='/' render={(props) => (
<IconMenu
items={[
{
icon: 'Edit',
name: 'Edit page',
route: '/edit'
},
{
icon: 'View',
name: 'View page',
route: '/save'
}
]}
/>
)}
/>
</div>
</BrowserRouter>
)
}
}