javascript - 路由器外部链接错误，而一切都设置正确

Question

好吧，我不知道为什么这不起作用。据我所见，一切都设置正确。

我正在使用"react-router-dom": "^5.0.0"

该代码还使用 Tabulator grid library ，特别是 React implementation of it 。这并不重要，只是想注意一下。

代码在不使用子组件链接的情况下100%工作，因此问题不存在。

Journals 中的网格生成器创建一个表格，其中包含链接单元格，链接到 Journal 组件。

链接组件生成得很好，只是由于我不知道的原因而不起作用。

CodeSandbox

如果您注释掉 Journal 组件中 columns 中的 formatter 行，应用程序将再次运行。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/layout/Header';
import Dashboard from './components/pages/Dashboard';
import Journals from './components/pages/Journals';
import Journal from './components/pages/Journal';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="container">
            <Header />
            <div className="content">
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/journals" component={Journals} />
              <Route path="/journals/:key" component={Journal} /> //    <------ ROUTE IS HERE
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

Journals.js

import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom';
import { ReactTabulator } from 'react-tabulator'
import "tabulator-tables/dist/css/tabulator.min.css";
import { reactFormatter } from 'react-tabulator';

function Journals() {

    const [journals, setJournals] = useState([]);

    useEffect(() => {
        fetch("http://localhost:4000/journals")
            .then(res => res.json())
            .then(data => {
                setJournals(data)
            })
            .catch(err => err);
    }, []);

    const JournalLink = (props) => {
        const cellData = props.cell._cell.row.data;
        let key = cellData.key_
        let link = `/journals/${key}`
        return <Link to={link}>{key}</Link>; //    <------ LINK COMPONENT IS HERE
    }

    const columns = [
        {
            title: "Number", 
            field: "key_", 
            formatter: reactFormatter(<JournalLink />) //    <------ LINK COMPONENT USED HERE
        },
        { title: "Date", field: "date_" },
    ];

    return (
        <div>
            <h1>Journals</h1>
            <ReactTabulator
                data={journals}
                columns={columns}
                tooltips={true}
                layout={"fitData"}
            />
        </div >
    )
}

export default Journals;

reactFormatter usage example
reactFormatter definition

Journal.js

import React, { useState, useEffect } from "react";
import { ReactTabulator } from 'react-tabulator'
import "tabulator-tables/dist/css/tabulator.min.css";

function Journal(props) {

    const [journalItems, setJournalItems] = useState([]);

    const initialFormJournalItems = {
        id: "",
        journalId: "",
        companyId: "",
        documentKey: "",
        documentDate: "",
        debitAccount: "",
        debit: "",
        creditAccount: "",
        credit: ""
    }

    const [formJournalItems, setFormJournalItems] = useState(initialFormJournalItems);

    useEffect(() => {
        fetch(`http://localhost:4000/journals/${props.match.params.key}`)
            .then(res => res.json())
            .then(data => {
                setJournalItems(data)
            })
            .catch(err => err);
    }, []); 

    const columns = [
        { title: "Document", field: "documentKey" },
        { title: "Date", field: "documentDate" },
    ];

    return (
        <div>
            <h1>Journal</h1>
            <ReactTabulator
                data={journalItems}
                columns={columns}
                tooltips={true}
                layout={"fitData"}
            />
        </div >
    )
}

export default Journal;

Answer 1

react-tabulator reFormatter 与react-router 库不兼容。

https://github.com/ngduc/react-tabulator/blob/0.10.3/lib/Utils.js#L30

来自源代码，

function reactFormatter(JSX) {
    return function customFormatter(cell, formatterParams, onRendered) {
        //cell - the cell component
        //formatterParams - parameters set for the column
        //onRendered - function to call when the formatter has been rendered
        onRendered(function () {
            var cellEl = cell.getElement();
            var CompWithMoreProps = React.cloneElement(JSX, { cell: cell });
            react_dom_1.render(CompWithMoreProps, cellEl.querySelector('.formatterCell'));
        });
        return '<div class="formatterCell"></div>';
    };
}

格式化元素的渲染使用ReactDOM.render函数将格式化元素直接渲染到与父元素隔离的DOM。

需要修复react-tabulator以支持此用例。一种方法是让 customFormatter 返回一个自定义组件，该组件提供了一种从外部设置其状态的方法。然后onRendered就可以调用这个函数来设置cell。