I have a component. When that component is clicked, I want a new component to show up (via a new url) and I want to pass in custom props to that component.

How would I go about doing that?

Here is my code so far -

"use client"
import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import CardActionArea from '@mui/material/CardActionArea';
import Link from 'next/link';

const IndividualCard = (props) => {
    // const doOnClick = (url) => {
    //     navigate(url);
    // } 
    return (
        <Link href={"/projects" + props.url}>
            <div style = {{flexGrow: 1, justifyContent: 'center'}}>
                <Card sx={{ width: 300 }}>
                      <CardActionArea>
                    <CardMedia
                      component="img"
                      height="140"
                      image = {props.image}
                      alt = {props.id}
                    />
                    <CardContent styles={{backgroundColor:'black', textColor:'white'}}>
                      <Typography gutterBottom variant="h5" component="div">
                        {props.name}
                      </Typography>
                      <Typography gutterBottom variant="subtitle1">
                          {props.category}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                          {props.description}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
            </div>
        </Link>
    );
}

export default IndividualCard;

When the IndividualCard component is clicked, I am redirected to the correct url. How do I pass custom props (an object with data) to the new url? Is that even possible?