使用react-router-dom的React应用页面空白无报错问题求助

你的代码存在几处react-router-dom v6的用法错误，直接导致页面空白：

1. App组件中Route写法不符合v6规范
   react-router-dom v6 不再允许在Route标签内部直接嵌套组件，所有路由对应的组件必须通过element属性传递。你写的/和/contact路由未设置element，因此这些组件无法被渲染。另外v6默认就是精确匹配，不需要exact属性。

2. Index组件冗余的Route包裹
   App组件本身已经包含完整的Routes和路由配置，无需在Index里用Route包裹App，直接在Router中渲染App即可。

3. Navbar组件中Link缺少必要属性
   最后一个Link标签<Link><FaUser /></Link>未设置to属性，虽然不会直接导致空白，但不符合规范，可能引发后续问题。

修改后的代码： #

Index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

App.js

import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './components/Home';
import AboutUs from './components/AboutUs';
import Contact from './components/Contact';
import Missing from './components/Missing';
import { Route, Routes } from 'react-router-dom'; // 移除未使用的useHistory

function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about_us" element={<AboutUs />} />
        <Route path="*" element={<Missing />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

Navbar.js

import React from 'react';
import logo from "../images/Odanhu1.png";
import { FaInstagram, FaUser } from 'react-icons/fa';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <div>
        <ul>
          <li><Link to="/">
            <figure>
              <img src={logo} alt="logo" />
              <figcaption>danhu</figcaption>
            </figure>
          </Link></li>
          <li><a href="https://www.instagram.com/"><FaInstagram /></a></li>
          <li><Link to="/about_us">About us</Link></li>
          <li><Link to="/contact">Contact</Link></li>
          <li><p>Partners</p></li>
        </ul>
        <ul>
          {/* 补充to属性，可根据实际需求修改路径 */}
          <li><Link to="/login"><FaUser /></Link></li>
        </ul>
      </div>
      <div>
        <p></p>
      </div>
    </nav>
  )
}

export default Navbar

修改后重启项目，页面即可正常渲染。

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