何通过道具传递 react-router-dom 链接用户 ID？

Question

I have six components which I want to redirect to six different links

import Post from "../post/Post";
import ".//posts.css";
export default function Posts() {
  return (
    <div className="flex-container">
      <Post title="2BHK 2Bath" rent="20000" redirect="1" />
      <Post title="3BHK 2Bath" rent="25000" redirect="2" />
      <Post title="1BHK 1Bath" rent="14000" redirect="3" />
      <Post title="3BHK 3Bath" rent="30000" redirect="4" />
      <Post title="2BHK 2Bath" rent="18000" redirect="5" />
      <Post title="1BHK 1Bath" rent="10000" redirect="6" />
    </div>
  );
}

Post.jsx

export default function Post({ title, rent, redirect }) {
  return (
    <div className="post">
      <img
        className="postImg"
        src="https://www.thespruce.com/thmb/aGEhef5NbpY6R_Fahn5fIW8SAHk=/941x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/put-together-a-perfect-guest-room-1976987-hero-223e3e8f697e4b13b62ad4fe898d492d.jpg"
        alt=""
      />
      <div className="postInfo">
        <div className="postCats"></div>
        <span className="postTitle">
          <Link
            to={{ pathname: "/post/{redirect}" }}
            className="link"
          >
            {title}
          </Link>
        </span>
        <hr />
        <span className="postDate">Rent: {rent}/-</span>
      </div>
    </div>
  );
}

This does not work, clicking on the first post with redirect: 1 redirects me to this URL http://localhost:3000/post/%7Bredirect%7D

I also tried making it like this from a stackoverflow answer

 <Link
to={{ pathname: "/post", state: { redirect } }}
className="link"
>
    {title}
</Link>

But this also did not work.

How I can make so that, I can pass the redirect_id through the props of the components.

Example:

When I click on component of <Post title="2BHK 2Bath" rent="20000" redirect="1" /> it should redirect me to http://localhost:3000/post/1

How can I do this?

Answer 1

you can try using template string

<Link to={{ pathname: `/post/${redirect || 0}` }} className="link">  
{title}
</Link>