如何在 React 中将数据传递给 <Link to=""/>

Question

我正在使用 React，我正在尝试从服务器接收数据，将其放入表中，同时为每行的标题提供一个链接以将其发送到自己的项目。 使用哈希图，我已经能够获取所有数据并将其放入表中，但我正在努力为他们提供自己独特的链接并将它们发送到他们自己的页面。 有什么方法可以动态地为每个数据行提供自己唯一的 Link to... id 并能够将它们发送到各自的唯一页面？

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import { useParams, useHistory } from "react-router";
import Practice from "./Practice";

function Projects(props) {
  const [data, setData] = useState([]);
  const history = useHistory();
  const { title } = useParams();

  useEffect(() => {
    axios
      .get("http://localhost:3001/getproject")
      .then(res => setData(res.data))
      .catch(err => console.log("projectconsole"));
  }, []);

  const createTable = () => {
    return data.map(project => {
      return (
        <Router>
          <TableRow key={project.projectid}>
            <TableCell>{project.jobtype}</TableCell>
            <TableCell>
              <Link to="/projects/practice/">{project.title}</Link>
            </TableCell>
            <TableCell>{new Date(project.deadline).toDateString()}</TableCell>
          </TableRow>
          <div>
            <Switch>
              <Route
                exact
                path="/projects/practice/:name"
                component={Practice}
              />
            </Switch>
          </div>
        </Router>
      );
    });
  };

  return (
    <Grid container justify="center">
      <div style={{ width: "50%" }}>
        <Typography
          variant="h3"
          style={{
            textAlign: "center",
            marginBottom: "20px",
            color: "#756F6E"
          }}
        >
          {" "}
          Projects{" "}
        </Typography>
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Job type</TableCell>
                <TableCell>Title</TableCell>
                <TableCell>Deadline</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>{createTable()}</TableBody>
          </Table>
        </TableContainer>
      </div>
    </Grid>
  );
}

export default Projects;

Working code so far

Answer 1

您可以使用template literals。

<Link to=`/projects/practice/${project.url}`>{project.title}</Link>