react-datatable
react-datatable copied to clipboard
Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
When I tried to download xls file by clicking export button its gives the error.
Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
at invariant (tiny-invariant.esm.js:13)
at Object.children (react-router-dom.js:147)
at ReactDOMServerRenderer.render (react-dom-server.browser.development.js:3749)
at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:3453)
at Object.renderToStaticMarkup (react-dom-server.browser.development.js:4086)
at ReactDatatable.getExportHtml (index.js:377)
at ReactDatatable.exportToExcel (index.js:414)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:466)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:481)
at executeDispatch (react-dom.development.js:614)
at executeDispatchesInOrder (react-dom.development.js:639)
at executeDispatchesAndRelease (react-dom.development.js:744)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:753)
at forEachAccumulated (react-dom.development.js:725)
at runEventsInBatch (react-dom.development.js:770)
at runExtractedPluginEventsInBatch (react-dom.development.js:916)
at handleTopLevel (react-dom.development.js:6171)
at batchedEventUpdates (react-dom.development.js:2422)
at dispatchEventForPluginEventSystem (react-dom.development.js:6271)
at dispatchEvent (react-dom.development.js:6301)
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at discreteUpdates$1 (react-dom.development.js:22935)
at discreteUpdates (react-dom.development.js:2440)
at dispatchDiscreteEvent (react-dom.development.js:6254)
constructor(props) {
super(props);
this.columns = [
{
key: "course_name",
text: "Course Name",
sortable: true,
width: 180,
cell: (record, index) => {
return (
<Link to={{
pathname: `/updatecourseadmin`,
state: {
course_id: record.course_id,
course_auto_id: record.id
}
}} className="enquiryLink">{ record.course_name }</Link>
);
}
},
{
key: "institute_name",
text: "Institute",
sortable: true,
width: 150
},
{
key: "course_category",
text: "Category",
sortable: true,
width: 150
},
{
key: "approve",
text: "Approve",
sortable: false,
width: 130,
cell: (record, index) => {
return (
<UnapproveChildApprove feature={record.id} approved={record.approved}/>
);
}
},
{
key: "preview",
text: "Preview",
sortable: false,
width: 100,
cell: (record, index) => {
return (
<img src={api_server.base_url+"/"+record.image} style={{height:"50px","width":"80px"}} />
);
}
}
];
this.config = {
page_size: 10,
length_menu: [10, 20, 50],
show_filter: true,
show_pagination: true,
pagination: 'advance',
filename: "approved_courses",
button: {
excel: true,
print: true,
csv: true
}
}
Please help
@ultimateakash Can you please provide code snippet so can reproduce the bug and fix it.
I am facing same issue
@ultimateakash I think you didn't wrap Datatable component into the Router
on react-router-dom
. try to do that then your issue should be resolved.