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

[ultimateakash]

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

[ashvin27]

@ultimateakash Can you please provide code snippet so can reproduce the bug and fix it.

[ashfaq92]

I am facing same issue

[ashvin27]

@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.