使用React Router时页面出现空白屏问题求助

问题分析 #

你的代码存在三个核心问题导致白屏：

• Route 组件写法错误：React Router v6 中，Route 仅通过 element 属性指定渲染组件，标签内部不能直接嵌套组件（嵌套路由需配合 Outlet 实现），重复嵌套会引发渲染异常。
• 缺少根路径匹配规则：网站默认加载根路径 /，但现有路由未匹配该路径，导致页面无内容显示。
• Navbar.Brand 跳转方式错误：使用原生 href 会触发页面刷新，不符合单页应用路由逻辑，还可能干扰路由正常工作。

修复后的完整代码 #

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
import Home from "../pages/Home.js" 
import About from "../pages/About.js" 

function NavbarComp () {
    return (
        <Router>
            <div>
                <Navbar bg="light" expand="lg">
                <Container>
                    <Navbar.Brand as={Link} to="/home">React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link as={Link} to="/home">Home</Nav.Link>
                        <Nav.Link as={Link} to="/about">About</Nav.Link>
                        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">
                            Another action
                        </NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">
                            Separated link
                        </NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    </Navbar.Collapse>
                </Container>
                </Navbar>

                <Routes>
                    {/* 根路径重定向到Home页面，也可直接将Home设为根路径 */}
                    <Route path="/" element={<Home />} />
                    <Route path="/home" element={<Home />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </div>
        </Router>
    )
}

export default NavbarComp

补充说明 #

1. 若希望根路径直接跳转至 /home，可导入 Navigate 组件修改根路由：

   import {BrowserRouter as Router, Routes, Route, Link, Navigate} from "react-router-dom";
   // ...
   <Route path="/" element={<Navigate to="/home" />} />
   

2. 确认 Home.js 和 About.js 文件路径正确，且组件内部无语法错误，这也是引发白屏的常见诱因。

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