React Router跨项目导航出现空白页问题求助

问题背景 #

• 两个独立React项目：主项目部署在根目录，dashboard项目部署在/dashboard子目录
• 单个项目内部导航正常，但从主项目通过react-router-dom的navigate跳转到dashboard路径时出现空白页，需刷新才能显示
• 使用react-router-dom@6.4.0，已尝试移除自定义Wrapper，无效

解决方案 #

1. 替换跨项目跳转方式 #

React Router的navigate仅适用于同一SPA内部的路由切换，两个独立项目属于不同的Router上下文，用navigate跳转时，当前项目的Router无法匹配目标路径，导致空白。

改用原生浏览器跳转方式：

// 替换原navigate代码
const createAccount = () => {
    window.location.href = "/dashboard/register";
}

或直接使用<a>标签：

<a href="/dashboard/register">创建账号</a>

2. 配置dashboard项目的Router basename #

dashboard部署在子目录，需给BrowserRouter添加basename属性，确保路由路径与部署目录匹配：

// 修改dashboard项目的AppRoutes
import { BrowserRouter as Router } from "react-router-dom";

export function AppRoutes() {
    // ... 其他代码不变

    return (
        <Router basename="/dashboard"> {/* 添加basename */}
            <Wrapper>
                <Routes>
                    {/* 路径去掉/dashboard前缀，由basename自动补充 */}
                    <Route path="/" element={<Home />} />
                    <Route path="/register" element={<Register />} />

                    <Route path="/" element={<PrivateRoute />}>
                        <Route path="/home" element={<Travels />} />
                        <Route path="/trip-details/:id" element={<TravelDetails />} />
                        <Route path="/account" element={<Profile />} />
                    </Route>
                </Routes>
            </Wrapper>
        </Router>
    )
}

3. 验证服务器配置 #

确保服务器能正确映射两个项目的请求：

• 根路径/返回主项目的index.html
• /dashboard/*路径返回dashboard项目的index.html
• 静态资源（JS/CSS）路径因已在package.json中配置homepage，打包后会自动适配，若出现404需检查服务器静态资源映射规则

总结 #

无需合并两个项目，通过修正跨项目跳转方式+配置Router basename即可解决空白页问题。

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