从 react-bootstrap-table2 的列渲染器中使用 Location 挂钩获取位置路径

Question

故事

我正在使用 react.js.

创建 2 个页面（摘要和循环页面）

在“摘要”页面上，有一个名为 CN 的列，每个项目都链接到“周期”页面。

摘要页面的路径为 /route/summary/location=abc，循环页面的路径为 /route/cycle/location=abc/deviceId=4410

例如，如果我单击“摘要”页面中 table 第一行中 CN 列的值，我将被重定向到路径为 [=16 的循环页面=].

在“摘要”页面中，我将 https://github.com/react-bootstrap-table/react-bootstrap-table2 用于 table 组件，并在 columns.js 中使用 columnRenderer 函数在 [=] 中呈现自定义项87=] 喜欢这个：

问题

如何将 pathname（示例“abc”）放入 columns.js 中 cnColumnRenderer 函数内的 Link 组件？

我想要的理想状态：

摘要页面路径：/route/summary/location=abc

循环页面路径：/route/cycle/location=abc/deviceId=4410

实际情况：

呈现摘要页面时由于挂钩调用无效而出错

我的代码：

table 摘要页面内的代码（在 Summary.js 内）：

提示：关注来自“./columns”的 columns 变量及其实现

import React from "react"
import { useLocation } from "react-router-dom"

import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, {
    PaginationProvider,
    PaginationListStandalone
} from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

import columns from './columns'

const Summary = () => {    
    const location = useLocation()
    const locationName = location['pathname'].replace('/route/summary/location=', '')
    // console.log('Summary, location:', locationName)
    // example: location = "/route/summary/location=abc" and locationName = "abc"

    // ...some code here...

    return (
        <React.Fragment>
            <div className="container-fluid ppa-route-summary-root">
                <Row>
                    <Col className="col-12">

                        {/* ...some code here... */}

                        {/* TABLE CARD */}
                        <Card>
                            <CardBody>
                                <PaginationProvider
                                    pagination={paginationFactory(paginationOptions)}
                                    keyField='id'
                                    columns={columns}
                                    data={tableData}
                                >
                                    {
                                        ({ paginationProps, paginationTableProps }) => (
                                            <ToolkitProvider
                                                keyField='id'
                                                columns={columns}
                                                data={tableData}
                                                search
                                            >
                                                {
                                                    toolkitProps => (
                                                        <React.Fragment>

                                                            {/* ...some code here... */}

                                                            {/* TABLE ITSELF */}
                                                            <Row>
                                                            <Col xl="12">
                                                                <div className="table-responsive">
                                                                    {
                                                                        isTableLoading ? 
                                                                        <ReactLoading 
                                                                            type={'spin'} 
                                                                            color={'crimson'} 
                                                                            height={'5rem'} 
                                                                            width={'5rem'} 
                                                                            className='table-loading'
                                                                        /> :
                                                                        <BootstrapTable
                                                                            keyField={"id"}
                                                                            responsive
                                                                            bordered={false}
                                                                            striped={false}
                                                                            // defaultSorted={defaultSorted}
                                                                            // selectRow={selectRow}
                                                                            classes={
                                                                                "table align-middle table-nowrap"
                                                                            }
                                                                            headerWrapperClasses={"thead-light"}
                                                                            {...toolkitProps.baseProps}
                                                                            {...paginationTableProps}
                                                                        />
                                                                    }
                                                                </div>
                                                            </Col>
                                                            </Row>

                                                            {/* ...some code here... */}

                                                        </React.Fragment>
                                                    )
                                                }
                                            </ToolkitProvider>
                                        )
                                    }
                                </PaginationProvider>
                            </CardBody>
                        </Card>
                    </Col>
                </Row>
            </div>
        </React.Fragment>
    )
}

export default Summary

columns.js:

import React from 'react'
import { Link, useLocation } from 'react-router-dom'

// IMAGES
import IconLocation from '../../../images/icons/location.svg'

const cnColumnRenderer = (cell, row, rowIndex, formatExtraData) => {
    // console.log('columns, cnColumnRenderer:', cell, row, rowIndex, formatExtraData)
    const deviceVersion = cell.split('-')[1] // example: deviceVersion = "4410"

    const location = useLocation()
    // console.log('Summary columns, location:', location['pathname'])

    // here is the pathname I wanted: "/route/cycle/location=abc" so I can take the "location" path value as below:
    const locationName = location['pathname'].replace('/route/summary/location=', '') // the result is locationName = "abc"
    // then put the locationName inside the Link component

    return(
        <div className='route-summary-cn'>
            <img src={IconLocation} alt='' className='icon-location'/>
            {/* below is the pathname I wanted: "/route/cycle/location=abc/deviceId=4410" */}
            <Link to={`/route/summary/location=${locationName}/deviceId=${row['deviceId']}`}>
                {deviceVersion}
            </Link>
        </div>
    )
}

const columns = [
    {
        dataField: 'deviceName',
        text: 'CN',
        formatter: cnColumnRenderer,
        sort: true
    },
    {
        dataField: 'convertedTotalCycle',
        text: 'Cycle',
        sort: true,
    },
    // ...some code here...
]

export default columns

注意：如果问题令人困惑，请告诉我。我会努力更新的

Answer 1

React hooks 仅在 React 功能组件中有效，在任何回调、循环、条件块中均无效。如果你需要回调中的位置数据，它需要传入。

据我所知，您似乎需要将 columns.js 代码 移动到 主要组件中，以便 location 值可以关闭范围。

const Summary = () => {    
  const location = useLocation();

  const locationName = location['pathname'].replace('/route/summary/location=', '')
  // example: location = "/route/summary/location=abc" and locationName = "abc"

  // ...some code here...

  const cnColumnRenderer = (cell, row, rowIndex, formatExtraData) => {
    // console.log('columns, cnColumnRenderer:', cell, row, rowIndex, formatExtraData)
    const deviceVersion = cell.split('-')[1] // example: deviceVersion = "4410"

    // then put the locationName inside the Link component

    return(
      <div className='route-summary-cn'>
        <img src={IconLocation} alt='' className='icon-location'/>
        {/* below is the pathname I wanted: "/route/cycle/location=abc/deviceId=4410" */}
        <Link to={`/route/summary/location=${locationName}/deviceId=${row['deviceId']}`}>
          {deviceVersion}
        </Link>
      </div>
    );
  };

  const columns = [
    {
      dataField: 'deviceName',
      text: 'CN',
      formatter: cnColumnRenderer,
      sort: true
    },
    {
      dataField: 'convertedTotalCycle',
      text: 'Cycle',
      sort: true,
    },
    // ...some code here...
  ];

  return (
    ...
  );