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>