React Router配置路由后页面空白 直接渲染组件正常如何解决

页面空白的核心原因是React Router v6 的路由规则必须运行在路由容器提供的上下文环境中才能生效。
你当前的代码仅在BooksApp组件内声明了<Routes>和<Route>匹配规则，但没有在应用外层包裹路由容器组件（<BrowserRouter>或<HashRouter>），路由系统无法读取当前浏览器地址，匹配不到任何对应路由条目，因此不会渲染任何组件，最终出现白屏。
你直接在render里同时挂载两个组件时，完全不依赖路由上下文，组件本身没有渲染错误，所以可以正常显示，这也能排除组件本身的代码问题。
另外你代码里给根路径加的exact属性是冗余代码：React Router v6 默认所有路由都是精确匹配，该属性在v6版本中已无实际作用，写了不会报错但可以删掉。

1. 打开项目的根入口文件（通常是src/index.js），引入路由容器组件，将整个应用根组件包裹在容器内，给全局提供路由上下文：

import React from 'react';
import ReactDOM from 'react-dom/client';
// 引入BrowserRouter作为路由容器
import { BrowserRouter } from 'react-router-dom';
import BooksApp from './App';
import './index.css';

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

2. （可选优化）清理App.js中路由的冗余属性，修改后的路由代码如下：

<div className="Root">
  <Routes>
    <Route path="/" element={<Main />} />
    <Route path="/search" element={<SearchBook />}/>
  </Routes>
</div>

修改完成后重启项目，访问根路径/会正常渲染Main组件，访问/search路径会正常渲染SearchBook组件，白屏问题解决。
如果项目需要部署在服务器的非根级子目录下，将上述代码中的BrowserRouter替换为HashRouter即可，其余路由规则不需要调整。

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