React使用react-router-dom添加路由后页面空白问题求助

你的页面空白主要有两个核心问题：

1. React Router v6 路由写法不符合规范 #

React Router v6 要求 Route 组件必须通过 element 属性指定要渲染的内容，不能像旧版本那样直接把内容嵌套在 Route 标签内部。

2. 缺少根路径匹配的路由 #

你仅配置了 /hello-world 路由，但默认访问的是根路径 /，没有对应的路由匹配，所以页面显示空白。

修改后的代码 #

import '../App.css';
import Header from "./header"
import Custom from "./custom"
import React, {useEffect, useState} from 'react'
import {BrowserRouter,Routes as Switch ,Route,Link} from 'react-router-dom';
let globalID =0

function App() {

  return <div>
    <div>
    <BrowserRouter>
      <p>Best to do list</p>
      {/* 添加导航链接，方便测试路由跳转 */}
      <Link to="/">首页</Link> | <Link to="/hello-world">Hello World</Link>
      <Switch>
        {/* 根路径路由，确保默认访问有内容 */}
        <Route path="/" element={<h1>我是首页</h1>} />
        {/* 按v6规范配置hello-world路由 */}
        <Route path="/hello-world" element={<h1>I am on route hello world</h1>} />
      </Switch>
    </BrowserRouter>
    <h2>I dont change with the page</h2>
    </div>
  </div>
}

export default App;

关键修改说明 #

• 所有 Route 组件的内容都通过 element 属性传递，这是 React Router v6 的强制要求
• 添加根路径 / 的路由，解决默认访问无内容的问题
• 增加 Link 组件，方便直接在页面上切换路由，验证跳转效果

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