react-router-dom中使用Navigate组件出现页面空白问题求助

嘿，我一眼就看出问题所在了——你是在react-router-dom v6版本里用了v5的API写法，这才导致页面空白的。我来帮你一步步修复：

问题根源 #

react-router-dom从v6开始做了不少API更新，有两个关键错误导致了你的页面空白：

• v6里彻底移除了Route组件的component属性，你之前写的component={() => <Navigate replace to="/posts" />}完全不会生效；
• 即使是element属性，也不能传一个返回JSX的箭头函数，必须直接传入JSX元素；
• 额外提一句：v6的路由默认就是精准匹配，exact属性已经没用了，可以直接删掉。

修复后的完整App.js代码 #

import React from 'react';
import { Container } from '@material-ui/core';
import { BrowserRouter , Route , Routes , Navigate } from 'react-router-dom'
import PostDetails from './components/PostDetails/PostDetails';
import Home from './components/Home/Home';
import Navbar from './components/Navbar/Navbar';
import Auth from './components/Auth/Auth';

const App = () => {
  const user = JSON.parse(localStorage.getItem('profile'));
  return (
    <BrowserRouter>
      <Container maxWidth="lg">
        <Navbar />
        <Routes>
          {/* 把component换成element，直接传入Navigate的JSX */}
          <Route path="/" element={<Navigate replace to="/posts" />} />
          <Route path="/posts" element={<Home/>} />
          <Route path="/posts/search" element={<Home/>} />
          <Route path="/posts/:id" element={<PostDetails/>} />
          {/* 这里也不能用箭头函数，直接写条件渲染的JSX */}
          <Route path="/auth" element={!user ? <Auth /> : <Navigate replace to="/posts" />} />
        </Routes>
      </Container>
    </BrowserRouter>
  )
};

export default App;

关键修改点说明 #

1. 根路由/的写法：把component替换成element，直接传入<Navigate replace to="/posts" />，而不是用箭头函数包裹；
2. /auth路由的写法：移除了箭头函数，直接在element里写条件渲染的逻辑——当没有用户时显示Auth组件，否则跳转到/posts；
3. 删掉了所有exact属性，因为v6的Route默认就是精准匹配，不需要额外声明。

这样修改后，你的路由跳转应该就能正常工作，页面也不会再空白啦！

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