javascript - 反应路由器错误你不应该在外面使用使用数据表时，在组件中返回之前使用链接时

Question

我的应用程序使用 React v17.0.2 react-router-dom v5.2.0"，@ashvin27/react-datatable v1.5.3

所以数据表具有将数据下载到excel中的内置功能但是当我单击按钮时会导致此错误错误：不变量失败：您不应该在外部使用

这是代码框链接： https ://codesandbox.io/s/link-outside-datatable-eo6d3

这是我的代码 Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import "bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

应用程序.js

import AppRoutes from "./AppRoutes";
import { Container } from "reactstrap";
const App = () => {
  return (
    <>
    <Container>
      <AppRoutes />
    </Container>
    </>
  );
}

AppRoutes.jsx

import { Switch, Route } from "react-router-dom";
import Pages from "./Pages";

const AppRoutes = () => {
    return (
        <Switch>
            <Route path="/">
                <Pages />
            </Route>
      </Switch>
    )
}

export default AppRoutes

表格.jsx

import Tables from "./Tables"
import ShowData from "./ShowData";
import records from "./records.json"
import { useRouteMatch } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import { useState } from "react";

const Pages = () => {
    const { path } = useRouteMatch();
    const [data, setData] = useState("")
    const columns = [
        {
            key: "name",
            text: "Name",
            className: "name",
            sortable: true
        },
        {
            key: "address",
            text: "Address",
            sortable: true
        },
        {
            key: "action",
            text: "Action",
            cell: (record, index) => {
                return (
                    <>
                        <Link to={`/view/${index}`}>
                            <button
                                className="btn btn-primary btn-sm"
                                style={{marginRight: '5px'}}
                                onClick={setData(record)}>
                                    Show Data
                            </button>
                        </Link>
                    </>
                );
            }
        }
    ];

    return (
        <>
        <Switch>
            <Route exact path={path}>
                <Tables records={records} columns={columns} />
            </Route>
            <Route exact path={`/view/:id`}>
                <ShowData data={data}/>
            </Route>
        </Switch>
        </>
    )
}

export default Pages

表格.jsx

import ReactDatatable from '@ashvin27/react-datatable';

const Tables = ({records,columns}) => {
    
    const config = {
        page_size: 10,
        length_menu: [10, 20, 50],
        show_filter: true,
        show_pagination: true,
        filename: "restaurents",
        button: {
            excel: true,
            print: true,
            csv: true
        }
    }

    return (
        <div>
            <ReactDatatable
                config={config}
                records={records}
                columns={columns}/>
        </div>
    )
}

export default Tables

显示数据.jsx

const ShowData = ({data}) => {
    return (
        <div>
            <h1>Data</h1>
            <h2>Name : {data.name}</h2>
            <h2>Addres : {data.address}</h2>
        </div>
    )
}

export default ShowData

错误是当我在Pages.jsx中使用它时。我可以导航到 ShowData 页面，但我无法下载到 Excel。

{
        key: "action",
        text: "Action",
        cell: (record, index) => {
            return (
                <>
                    <Link to={`/view/${index}`}>
                        <button
                            className="btn btn-primary btn-sm"
                            style={{marginRight: '5px'}}
                            onClick={setData(record)}>
                                Show Data
                        </button>
                    </Link>
                </>
            );
        }
    }

但是如果我给我可以下载文件，但我无法导航到“/view/${index}”

{
    key: "action",
    text: "Action",
    cell: (record, index) => {
        return (
            <>
                <BrowserRouter>
                    <Link to={`/view/${index}`}>
                        <button
                            className="btn btn-primary btn-sm"
                            style={{marginRight: '5px'}}
                            onClick={setData(record)}>
                                Show Data
                        </button>
                    </Link>
                </BrowserRouter>
            </>
        );
    }
}

这是屏幕截图 Excel 下载按钮位于搜索栏的右侧。

各位有什么解决办法吗？之前谢谢你！

标签： javascriptreactjsdatatablereact-router-dom