为什么我的 URL ID 字符串中有多余的字符？

Question

我想显示我的“客户”的详细信息。但是，我认为我的路线有问题，因为在我的 URL 中我得到了 http://localhost:3000/app/details-customer/%7Bid%7D 而不是 ID。

当我在路由中写 {path: BASEDIR + "/details-customer/{id}", component: Tabs2, type: "child"} 和在 Customer.jsx 中写 <Link to = {"./details-customer/ {id}"> 时，我设法显示了我的 Tabs2 页面，或者当我在 raw 中写 ID 时，它不起作用。

例如，当我写 <Link to = {"./details-customer/{id}" + customer.id}> 时，我得到了具有正确 ID 的 URL，但它返回给我一个空白页。

有人可以帮助我吗？

这是我在 Customers.jsx 中的代码：

      { switch (customer.etat) {
         case true:
                return (
                   <tr key={customer.id}>
                     <td>{customer.id}</td>
                     <td>{customer.lastName}</td>
                     <td>{customer.firstName}</td>
                     <td>{customer.email}</td>
                     <td>{customer.mobile}</td>
                     <td>{customer.company}</td>
                     <td>{customer.companyID}</td>
                     <td>
                      <Link to ={"./details-customer/{id}"} >
                        <button value={customer.id}>
                        </button>
                      </Link>
                      <button
                        onClick={() => showEditFormCustomer(customer.id)}
                        value={customer.id}
                        className="bi bi-pencil-fill">
                        </button>
                        <button
                        onClick={() => deleteCustomer(customer.id)}
                        value={customer.id}>
                      </button>
                   </td>
                   </tr>);
                   case false:
                  return "";
                   }})())}

路线：

{
        path:BASEDIR+ "/customers", name: "Client", component: Customer ,icon: "people", type: "",
        child: [
           /* { path: BASEDIR+"/customers", name: "Clients"},
            { path: BASEDIR+"/add-customer", name: "Ajouter un client"},
            { path: BASEDIR+"/edit-customer", name: "Modifier un client"},*/
        ]
    },

    { path: BASEDIR+"/details-customer/{id}", component: Tabs2, type: "child"},
    //{ path: BASEDIR+"/add-customer", component: AddCustomer, type: "child"},
    { path: BASEDIR+"/customers", component: Customer, type: "child"},

Answer 1

应使用: 定义占位符，因此它将是:id 而不是{id}：

{ path: BASEDIR+"/details-customer/:id", component: Tabs2, type: "child"},

文档：https://reactrouter.com/web/example/url-params

要调试您的路线，您可以使用以下设置：

{ path: "/a", component: AddCustomer, type: "child"},
{ path: "/b", component: Tabs2, type: "child"},
{ path: "/c/:id", component: Customer, type: "child"},

测试链接：

<Link to={"/a"}>Link A</Link>
<Link to={"/b"}>Link B</Link>
<Link to={"/c/20"}>Link C</Link>