使用react-router-dom的NavLink组件时页面白屏问题求助

白屏是运行时JS报错直接中断渲染导致的，核心问题是MUI的Tab组件和react-router-dom v6版本的NavLink存在props传递不兼容问题，你入口文件里的BrowserRouter配置写法正确，不需要额外调整入口配置。
MUI的Tab渲染时会向传入的LinkComponent透传大量自身的状态属性（比如selected、textColor、indicatorColor这类组件内部状态props），而react-router-dom v6版本的NavLink做了严格的属性校验，接收到非路由/非DOM合法属性时会直接抛出运行时错误，直接导致整页白屏。移除NavLink相关代码后，Tab默认渲染为普通按钮，没有属性校验冲突，所以页面能正常加载。

修复步骤 #

1. 先确认本地安装的react-router-dom版本，在项目根目录执行命令：

   npm list react-router-dom
   

   如果输出的版本号为6.x（目前新安装默认都是v6版本），按下面的逻辑修改代码即可。
2. 修改Header.js组件，对NavLink做一层适配，过滤MUI透传的多余属性：

   import React, {useState} from "react";
   import { AppBar, Tab, Tabs, Toolbar, Typography} from "@mui/material";
   import { NavLink } from "react-router-dom";
   
   // 新增适配组件，只透传NavLink需要的合法属性
   const NavLinkAdapter = (props) => {
     const { to, className, style, children, end } = props;
     return (
       <NavLink to={to} className={className} style={style} end={end}>
         {children}
       </NavLink>
     )
   }
   
   const Header =  () => {
       const [value, setValue] = useState(0); // 给个默认值0，避免初次渲染选中态异常
       return (
       <div>
           <AppBar sx={{ backgroundColor: "#100c09"}} position="sticky">
             <Toolbar>
                 <Typography> 
                     <img src="https://i.ibb.co/zGZshwK/furnica.png" height="50px" width="50px" alt="logo" />    
                 </Typography>
                 <Tabs 
                   textColor="inherit" 
                   indicatorColor="secondary" 
                   value={value} 
                   onChange={(e,val) => setValue(val)}
                 >
                   {/* 把原来直接传NavLink换成适配后的组件 */}
                   <Tab LinkComponent={NavLinkAdapter} to="/AboutUs" label="About Us" />
                   <Tab LinkComponent={NavLinkAdapter} to="/Products" label="Products" />
                   <Tab LinkComponent={NavLinkAdapter} to="/Sale" label="Sale!" />        
                 </Tabs>
             </Toolbar>
         </AppBar>
       </div>
       );
   };
   
   export default Header;
   

3. 在App.js中补全路由配置，否则点击跳转后没有匹配的页面组件会显示空白，示例配置：

   import { Routes, Route } from 'react-router-dom';
   import Header from './components/Header';
   // 下面三个替换成你自己的页面组件实际路径
   import AboutUs from './pages/AboutUs';
   import Products from './pages/Products';
   import Sale from './pages/Sale';
   
   function App() {
     return (
       <div>
         <Header />
         <Routes>
           <Route path="/AboutUs" element={<AboutUs />} />
           <Route path="/Products" element={<Products />} />
           <Route path="/Sale" element={<Sale />} />
           {/* 可配置默认首页路由 */}
           <Route path="/" element={<Products />} />
         </Routes>
       </div>
     )
   }
   
   export default App;
   

特殊情况说明 #

如果你本地安装的是react-router-dom 5.x版本，不需要做属性过滤，只需要把Tab上的LinkComponent属性改成component即可正常使用，注意v5版本的路由容器要使用Switch而非Routes。
如果改完仍有报错，直接打开浏览器控制台查看具体报错信息，优先确认Header组件是在BrowserRouter包裹的子树内渲染（你目前的入口写法已经满足这个要求，只要Header在App组件内渲染就没问题）。

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