React.js页面加载时无法导航跳转问题求助

你的重定向逻辑失效的核心原因是判断条件错误：你在代码里用了localStorageOperation === 'null'，但实际上当localStorage中未设置postOperations时，获取到的值是原始null，而非字符串'null'，导致判断永远不成立，重定向逻辑无法触发。

具体修复步骤 #

1. 修正判断条件 #

将所有判断'null'的地方替换为判断原始null或假值：

修复useEffect中的逻辑

useEffect(() => {
    // 当localStorageOperation为null/undefined时触发重定向
    if (!localStorageOperation) {
        navigate('/homepage');
    }
}, [localStorageOperation, navigate]);

修复Navigate组件的判断

{(localStorageOperation == null) && <Navigate to="/homepage" replace />}
// 或者更贴合业务逻辑：只有当值为'addPost'时才显示页面，否则重定向
{localStorageOperation !== 'addPost' && <Navigate to="/homepage" replace />}

给Navigate加上replace属性可以避免用户点击后退时回到当前页面，优化路由体验。

2. 验证Context中localStorage的读取逻辑 #

检查PostOperationsContextFunction中获取localStorageOperation的代码，确保它正确解析localStorage值：

// 示例正确读取方式
const localStorageOperation = JSON.parse(localStorage.getItem('postOperations'));

如果直接用localStorage.getItem('postOperations')，未设置时会返回null（符合我们的判断）；如果之前错误地存储了字符串'null'，需要先清理localStorage对应键值，或者调整判断逻辑适配错误存储的值。

3. 优化页面渲染逻辑 #

当前代码中，即使重定向条件触发，页面依然会渲染AppBarComp和空的Container，可以将整个页面内容包裹在条件判断中，避免不必要的渲染：

return (
    <ThemeProvider theme={theme}>
        {localStorageOperation === 'addPost' ? (
            <>
                <AppBarComp />
                <Container maxWidth="xl" element="main" sx={{ display: "flex", justifyContent: "center", marginBottom: "20px" }}>
                    <Box component="form" onSubmit={handleSubmit} element="div"
                        sx={{
                            width: "90%",
                            maxWidth: "600px",
                            textAlign: "center", boxShadow: "2px 2px 10px 5px hsl(179, 100%, 0%, 0.2)",
                            borderRadius: "10px", padding: "30px 40px"
                        }}>
                        <Typography component="h1" variant="h5" textAlign={"left"} sx={{ fontWeight: "bolder", fontSize: "1.8em" }}>
                            Compose your post
                        </Typography>
                        <TextField required inputProps={{ minLength: 10 }} onChange={(event) => setPostTitle(event.target.value)} id="standard-basic" label="Title" variant="outlined" margin="normal" fullWidth />
                        <TextField required inputProps={{ minLength: 10 }} onChange={(event) => setPostContent(event.target.value)} id="standard-basic" label="Content" variant="outlined" multiline rows={4} margin="normal" fullWidth />
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            sx={{ mt: 3, mb: 2 }} >
                            Post
                        </Button>
                    </Box>
                </Container>
            </>
        ) : (
            <Navigate to="/homepage" replace />
        )}
    </ThemeProvider>
);

这样修改后，当localStorageOperation不符合要求时，会直接渲染重定向组件，不会加载多余的页面元素，同时确保重定向逻辑正常触发。

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