How to partially hyperlink portion of text and navigate using react-router-dom?

Question

I have a sentence

Sign In to comment.

I want to create hyperlink for part of my text ("Sign In") and use useNavigate or some other part of react-router-dom to link this to a different route in my frontend. Right now, I have:

const navigate = useNavigate();
return (
        <Typography gutterBottom variant="body1" component="div">
            <Link
                component="button"
                variant="body1"
                onClick={() => {
                    navigate('/login')
                }}
            >
                Sign In
            </Link>
            to comment.
        </Typography>
);

using MUI and React, but it looks like this:

You can see

1. The text isn't completely aligned
2. There is no space between the "Sign In" and "to comment"

Is there a better way to do this?

Answer 1

  <Typography gutterBottom variant="body1" component="div">
    <Box sx={{ alignItems: "baseline" }}>
      <Link component="button" variant="body1" to="/login">
        Sign In
      </Link>{" "}
      to comment.
    </Box>
</Typography>

You dont need to put an on click function in the Link, you can instead use the to="/login" prop

To answer your first question, you can use a flex box and alignItems: 'baseline', this will make your text align to the same baseline.

To answer your second question, you can add a space using jsx {" "}