如何使用Link组件实现Grid项可点击跳转并解决点击无响应问题

1. 优先修正路径为绝对路径 #

你当前使用的是相对路径post/${postid}，会基于当前页面路由拼接地址，大概率是路径不匹配导致跳转无响应，改为绝对路径即可：
把to={post/${postid}} 修改为 to={/post/${postid}}（开头加斜杠，直接从根路由匹配）

2. 改用 Material UI 官方推荐的组件绑定写法 #

外层包裹Link的写法在MUI组件体系下容易出现样式、事件继承问题，推荐直接给Grid组件绑定Link作为渲染根节点，正确写法如下：

const PostsListView = ({ posts, setError, isloggedin }) => {
    const [redirectCreatePost, setRedirectCreatePost] = React.useState(false)

    if (redirectCreatePost) return (<Navigate to='/createPost' />)
    return (
        <Grid container
            align="center"
            alignItems="center"
            justify="center"
            direction="column"
        >
            {
                posts.map(({ category, username, postHeading, createdAt, postid }) => {
                    return (
                            <Grid
                                key={postid}
                                item container
                                component={Link}
                                to={`/post/${postid}`}
                                alignItems="center"
                                style={{
                                    width: 600,
                                    borderRadius: 10,
                                    margin: 5,
                                    backgroundColor: '#D3D3D3',
                                    textDecoration: 'none', 
                                    color: 'black'
                                }}>
                                <Grid container direction="column">
                                    <Grid item container justify="flex-end">
                                        <Grid item style={{ marginTop: 5, marginLeft: 20 }}> <b>{`c/${category}`}</b> </Grid>
                                        <Grid item style={{ marginTop: 5, marginLeft: 5 }}> {`  posted by u/${username}  ${getTime(createdAt)}`} </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item container alignItems="center" align="left">
                                    <Typography variant="h6" style={{ width: 600, marginLeft: 20, marginRight: 20 }}>{postHeading}</Typography>
                                </Grid>
                            </Grid>
                    )
                })
            }
        </Grid>
    )
}

3. 排查基础依赖配置 #

• 确认你的应用最外层已经包裹了BrowserRouter/HashRouter组件，React Router的所有导航组件必须在Router上下文内才能生效
• 检查路由配置中是否正确注册了/post/:postid对应的路由规则，路径大小写、拼写要完全匹配
• 确认没有子元素绑定了e.stopPropagation()阻止点击事件冒泡到Link组件

内容的提问来源于stack exchange，提问作者Bad_Panda