React添加路由导航后出现空白页及getElementById报错

你遇到的Cannot read property of undefined 'getElementById'空白页问题，是react-router-dom v6用法错误导致的，和你给div加id="root"的操作无关。之所以抛出getElementById相关错误，是因为路由上下文缺失时，库内部访问全局document对象失败触发的连锁报错，具体错误点有3个：

• 第一，useNavigate钩子必须在Router上下文内部调用。你当前在App组件内直接调用useNavigate，但包裹路由的<BrowserRouter>写在了App组件的return里，等于调用钩子的时候路由上下文还没创建，直接触发底层报错。
• 第二，navigate()方法接收的第一个参数是路径字符串，不是React组件，你写的navigate(Newpage)属于完全错误的传参。
• 第三，你导入的Newpage组件没有配置对应的<Route>路由规则，就算导航参数修正后也无法匹配到对应页面。

1. 把<BrowserRouter>的包裹层移到App组件外层，不要写在App组件的return逻辑里。常规做法是直接移到src/index.js入口文件中包裹<App />，保证整个App组件都在路由上下文作用域内。
2. 给Newpage组件配置对应的路由路径，比如路径设为/closet。
3. 修正navigate的传参，传入提前配置好的路径字符串，不要直接传入组件本身。
4. 删掉你在App组件根div上加的id="root"——这个id是public/index.html里React应用挂载节点的专属id，在React组件内部重复加同名id反而会造成DOM查询冲突。

首先调整src/index.js入口文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 把路由容器移到最外层，包裹整个App */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

然后调整src/App.js文件：

import './App.css';
import { Routes, Route, useNavigate, Link } from 'react-router-dom';
import Newpage from './screens/Newpage.js'

function App() {
  // 现在App处于BrowserRouter上下文内部，useNavigate可正常调用
  const navigate = useNavigate();
  
  function navigateToCloset(){
    // 传入配置好的路径字符串，不要直接传组件
    navigate('/closet');
  }

  const About = () => (
    <div className='about'>
      <h1>About Me</h1>
      <p>Ipsum dolor dolorem consectetur est velit fugiat. Dolorem provident corporis fuga saepe distinctio ipsam? Et quos harum excepturi dolorum molestias?</p>
      <p>Ipsum dolor dolorem consectetur est velit fugiat. Dolorem provident corporis fuga saepe distinctio ipsam? Et quos harum excepturi dolorum molestias?</p>
    </div>
  );

  const Contact = () => (
    <div className='contact'>
      <h1>Contact Me</h1>
      <p>You can reach me via email: <strong>hello@example.com</strong></p>
    </div>
  );

  return (
    <div>
      <div className='header'>
        My Closet
      </div>
      <div className='homepagebuttondiv'>
        <button className='homepagebutton' onClick={navigateToCloset}>
          Enter Closet
        </button>
        <button className='homepagebutton'>
          New Clothing
        </button>
      </div>
      <Routes>
        {/* 给Newpage配置对应路由规则 */}
        <Route path="/closet" element={<Newpage />} />
        <Route path="/about" element={<About />}/>
        <Route path="/contact" element={<Contact />} />
      </Routes>

      <nav>
        <Link to="/about">About</Link>
      </nav>
    </div>
  );
}

export default App;

注意：如果Newpage组件内部也用到了useNavigate、Link这类路由相关的钩子或组件，不需要再额外套BrowserRouter，外层已经提供了完整的路由上下文。

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