我正在使用react链接在我的表中添加“编辑学生”页面链接。但是，如果没有任何明显的错误，变量不会沿着url传递。相反，url被呈现为一个完整的字符串。我目前正在学习react js。我没有像通常编写后端代码那样使用javascript，所以我不知道如何解决这个问题。我试着到处找，但找不到解决办法。
student.js中的我的代码（以下参考中的完整代码）：

<Link
                to={"edit-student/$id{item.id}"}
                className="btn btn-success btn-sm">
                Edit
              </Link>

应该呈现的url： http://localhost:3000/edit-student/1 正在呈现的url： http://localhost:3000/edit-student/$id%7Bitem.id%7D 供参考：
app.js代码：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Student from "./pages/Student";
import Addstudent from "./pages/Addstudent";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Student} />
        <Route path="/add-student" component={Addstudent} />
        <Route path="/edit-student/:id" component={Addstudent} />
      </Switch>
    </Router>
  );
}

export default App;

student.js代码：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

class Student extends Component {
  state = {
    students: [],
    loading: true,
  };
  async componentDidMount() {
    const res = await axios.get("http://127.0.0.1:8000/api/v1/students");
    if (res.data.status === 200) {
      this.setState({
        students: res.data.students,
        loading: false,
      });
    }
  }
  render() {
    var student_HTMLTABLE = "";
    if (this.state.loading) {
      student_HTMLTABLE = (
        <tr>
          <td colSpan="7">
            <h2>Loading...</h2>
          </td>
        </tr>
      );
    } else {
      student_HTMLTABLE = this.state.students.map((item) => {
        return (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.course}</td>
            <td>{item.email}</td>
            <td>{item.phone}</td>
            <td>
              <Link
                to={"edit-student/$id{item.id}"}
                className="btn btn-success btn-sm"
              >
                Edit
              </Link>
            </td>
            <td>
              <button className="btn btn-danger btn-sm" type="button">
                Delete
              </button>
            </td>
          </tr>
        );
      });
    }
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header">
                <h4>
                  Student Data
                  <Link
                    to="add-student"
                    className="btn btn-primary btn-sm float-end"
                  >
                    Add Student
                  </Link>
                </h4>
              </div>
              <div className="card-body">
                <table className="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Course</th>
                      <th>Email</th>
                      <th>Phone</th>
                      <th>Edit</th>
                      <th>Delete</th>
                    </tr>
                  </thead>
                  <tbody>{student_HTMLTABLE}</tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Student;

我在package.json中的依赖项

"axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"