Question

当用户单击下面的tableCell文本时，应该将他导航到http://localhost:3000/crayons/${rows.id} <-这存在于我的react-router-dom

我不确定如何编辑以下代码来执行以下操作

<TableBody>

{props.rows.slice(page).map(row => (
     <TableCell align="center">{row.crayon_color}</TableCell>

</TableBody>

我尝试过的

<TableCell align="center" numeric component="a" href=`http://localhost:3000/crayons/${rows.id}`> {row.crayon_color}</TableCell>

Answer 1

尝试对表单元格使用回调，该回调将路由推入history，这样您的代码将类似于以下内容：

import React from 'react';
import {withRouter} from 'react-router-dom';

const ExampleComponent = (props) => {

  // ...other component variables

  callback = () => {
    props.history.push(`crayons/${rows.id}`)
  }

  return (
    <TableCell align="center" onClick={callback}>{row.crayon_color}</TableCell>
  );
}

export default withRouter(ExampleComponent);

Answer 2

EDIT 更新了实时演示，以显示如何处理数组中的动态对象。

EDIT 2 更新了实时演示和以下代码，以反映如何将URL参数与动态对象一起使用。.

我相信最简单的方法是使用<Link/>中的react-router-dom组件。

Live Demo Found Here

BrowserRouter的外观如下：

    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/crayons" component={Crayons} />
      <Route path="/crayons/:id" component={Crayons} />

      {/* MUST BE THE LAST ROUTE IN THIS LIST!!!! */}
      <Route component={FourZeroFour} />
    </Switch>

然后，在您的Crayons.js页面内，您可以访问URL参数，在这种情况下，您可以访问id，例如：props.match.params.id ..

演示Table代码：

// Build 'fake data' for table
const rows = Array.from(Array(10).keys()).map(item => {
  return {
    data: "Crayon",
    count: Math.floor(Math.random() * 100),
    id: item + 1
  }
})

export default function Home() {
  const classes = useStyles();

  return (
    <>
      <h1>Welcome to my app</h1>
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Data</TableCell>
              <TableCell>ID</TableCell>
              <TableCell>Count</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map(row => {
              return (
                <TableRow key={row.id}>
                  <TableCell component="th" scope="row">
                    {row.id
                      ? <Link to={`/crayons/${row.id}`}>{row.data}</Link>
                      : row.data}
                  </TableCell>
                  <TableCell>
                    {row.id}
                  </TableCell>
                  <TableCell>
                    {row.count}
                  </TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </Paper>
    </>
  )
}

Answer 3

您可以使用库React Router Dom。

解决方案很简单，将Router HOC添加到您的组件中。

import { withRouter } from 'react-router-don'


const Component = () => (
    <TableCell align="centre" onClick={()=>props.history.push(`${rows.id}`)}>{row.crayon_color}</TableCell>
)

export default withRouter(Component);

在React中使表格单元格可点击

3 个答案: