React-Router从子路由加载而非首页时工作异常求助

问题根源 #

你的核心问题出在Router组件的basename配置错误：

• 你把basename设置为location.pathname，这会导致每次加载页面时，React Router将当前URL路径作为基础路径
• 比如直接访问https://react.domain.com/page1时，basename被设为/page1，后续所有路由都会基于这个路径拼接，生成/page1/login、/page1/page1这类错误路径

解决方案 #

1. 修正Router的basename配置 #

移除错误的location.pathname配置，因为你的应用部署在根域名下，不需要自定义basename（或显式设置为"/"）。同时确保使用BrowserRouter（react-router-dom中针对浏览器环境的路由组件，你的代码中写的Router是基础组件，建议明确使用BrowserRouter）。

修改后的客户端核心代码 #

<StoreProvider store={store}>
    <Suspense fallback={<MainPageFallback />}>
        <ThemeProvider theme={theme}>
            {/* 移除错误的basename配置，使用BrowserRouter */}
            <BrowserRouter>
                <I18nextProvider i18n={i18next}>
                    <TryCatch>
                        <Navbar actions={<UserSettings />} />
                        <div className={classes.appContent}>
                            <Switch>
                                <Route exact path="/start">
                                    <LandingPage />
                                </Route>
                                <Route exact path="/search">
                                    <SearchPlacePage />
                                </Route>
                                <Route exact path="/signup">
                                    <SignUpPage />
                                </Route>
                                <Route exact path="/signin">
                                    <LoginPage />
                                </Route>
                                <Route exact path="/forgot_password" component={ForgotPassword} />
                                <Redirect from="/*" to="/start" />
                            </Switch>

                            <Snackbar />
                        </div>
                    </TryCatch>
                </I18nextProvider>
            </BrowserRouter>
        </ThemeProvider>
    </Suspense>
</StoreProvider>

2. 验证服务端配置（当前已正确） #

你的Express后端配置@Route('/*')返回React应用的index.html，这是正确的SPA路由配置，确保刷新或直接访问子页面时，服务端不会返回404，而是交给React Router处理路由逻辑。

额外注意事项 #

• 确保项目中所有静态资源（如CSS、JS、图片）使用绝对路径引用，避免使用相对路径导致直接访问子页面时资源加载失败
• 如果后续需要将应用部署在子路径（如https://react.domain.com/app），再将basename设置为对应路径（如"/app"）

内容的提问来源于stack exchange，提问作者Sebastien C.