使用react-router-dom配置多路由时页面空白问题求助

原因 #

你遇到的核心问题是导入方式和组件导出方式不匹配：
当组件使用命名导出时，如果你用默认导入的方式（不带大括号）去引入，最终得到的导入值是undefined。React渲染undefined的组件时不会抛出明显错误，但会直接渲染空白内容；甚至仅仅错误导入这个组件，就可能干扰组件树的正常初始化，导致整个页面无法渲染。

解决办法 #

有两种方案可以修复，选一种适合你的即可：

方案1：修改导入方式，匹配命名导出

如果你的Books组件是这样命名导出的：

// Books.jsx
export const Books = () => {
  return <div>Books Page</div>;
};

那么导入时必须使用命名导入（带大括号）：

import { Books } from './Books';

方案2：修改组件为默认导出

如果想继续使用默认导入的写法，把Books组件的导出改成默认导出：

// Books.jsx
const Books = () => {
  return <div>Books Page</div>;
};

export default Books;

对应的导入方式保持默认导入即可：

import Books from './Books';

正确路由配置示例（以react-router-dom v6为例） #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home'; // Home为默认导出
import { Books } from './Books'; // 对应命名导出的导入方式

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<Books />} />
      </Routes>
    </Router>
  );
}

export default App;

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