Passing React Router Link "to" parameter as props-CodePudding

This my main page which consists of multiple same components but just with different details. The thing which i am trying to attain is that clicking on a blogItem makes me go a unique page of it

export default function Bloghome() {
const blog_1_category="tech";

//removing the multiple unnecessary variables for convenience 

return (
    <>
        <div className="blog-it-1">
          <Blogitem
            cat={blog_1_category}
            title={blog_1_title}
            desc={blog_1_desc}
          />
        </div>

        <div className="blog-it-2">
          <Blogitem
            cat={blog_2_category}
            title={blog_2_title}
            desc={blog_2_desc}
          />
        </div>
</>
);
}

This is my BlogItem component

export default function Blogitem(props) {

  const {cat,title,desc}=props;

  return (
    <>
      <div className="blog-item-border">
        <img src={person} alt="" className="blog-item-img" />
        <div className="blog-item-category">{cat}</div>
        <div className="blog-item-title">{title}</div>
        <div className="blog-item-desc">
          {desc}
        </div>
        <div className="blog-item-button">
          <Link to="/">
            <button>Read Post</button>
          </Link>
        </div>
      </div>
    </>
  );
}

In this I want to pass an address as a prop, let say whose value is address_1="/blog-1" and assign it to the Link like this

<Link to={address_1}>   <button>Read Post</button>   </Link>

I tried doing this, searched the internet for articles and videos but didn't succeed

CodePudding user response：

In your App.js class, define your routes first.

function App(prop) {
  const {isLoggedIn} = props;
  return (
      <ThemeProvider theme={theme}>
              <BrowserRouter>
                  <Switch>
                    <Route exact path='/' component={Bloghome}/>
                    <Route exact path='/posts/:blogID' component={Blogitem}/>
                  </Switch>
              </BrowserRouter>
      </ThemeProvider>
  );
}

Now in your Blogitem class, you can read the id as a url parameter.

export default function Blogitem(props) {

  const {cat,title,desc}=props;
  let { blogID } = useParams();

  return (
    console.log(blogID);
    <>
      <div className="blog-item-border">
        <img src={person} alt="" className="blog-item-img" />
        <div className="blog-item-category">{cat}</div>
        <div className="blog-item-title">{title}</div>
        <div className="blog-item-desc">
          {desc}
        </div>
        <div className="blog-item-button">
          <Link to="/">
            <button>Read Post</button>
          </Link>
        </div>
      </div>
    </>
  );
}

You can pass the Item ID as a URL parameter when you create the link.

<div className="blog-item-button">
  <Link to="/posts/001">
    <button>Read Post</button>
  </Link>
</div>