React Router 和 Material-Table - 過濾列值

Question

如何將 Route 參數的值傳遞到 React 表的過濾器字段中？

我正在使用一個名為材料表的組件。 有一組這樣的鏈接：

<ul>
  <li>
    <Link to="/Products/Dogs/Foods">Dog Food Products</Link>
  </li>
  <li>
    <Link to="/Services/Cats/Grooming">Cat Grooming Services</Link>
  </li>
</ul>

<Switch>
  <Route exact path="/:business/:category/:product" component={Material_Table}/>
</Switch>

然后在 Material_Table 組件中，我需要根據這些 url 參數過濾列。 現在只需將它們放在 h4 中：

<div className="alert">
      <h4>Business: {business}. Category: {category}. Product: {product}.</h4>
    </div>

    <MaterialTable
        title = "Projects"
        icons = {tableIcons}
        columns={[
            {
                title: 'Name',
                field: 'name'
            },
            {
                title: 'Business',
                field: 'values[9]'
            },
            {
                title: 'Category',
                field: 'values[10]'
            },
            {
                title: 'Product',
                field: 'values[8]'
            },
        ]}
        data = {items}
        options ={{
          filtering: true
        }}
        />

嘗試將表達式放在 object 列中，但這不起作用。 我知道有一個默認值選項，但這似乎也不對。 非常感謝任何幫助！

Answer 1

在每列上使用defaultFilter有效：

<MaterialTable
    title = "Projects"
    icons = {tableIcons}
    columns={[
        {
            title: 'Name',
            field: 'name'
        },
        {
            title: 'Business',
            field: 'values[9]',
            defaultFiler: business
        },
        {
            title: 'Category',
            field: 'values[10]',
            defaultFilter: category
        },
        {
            title: 'Product',
            field: 'values[8]',
            defaultFiler: product
        },
    ]}
    data = {items}
    options ={{
      filtering: true
    }}
    />