如何使用 GitHub Pages 上托管的 ReactJS 应用程序实现多个子路由？ [重复]

Question

我将reactJS用于多路线应用程序。

过去，我在 Netlify 上托管我的应用程序，然后使用

react-spa-prerender

实现预渲染以改进 SEO。

最近我将其迁移到 GitHub 页面，保持预渲染的有效性。

然后，我尝试摆脱这种预渲染，并且我的子页面不再提供服务。

我的

App.js

返回这个：

return (
        <>
            <div className="App" id="capture">
                <AppContext.Provider value={appContext} > 
                    <div className={`${theme}`}>
                        <BrowserRouter>
                             <Routes>
                                <Route exact path={pathBuilder('/')} element={<CurriculumVitae domain={EnumDomain.GENERIC}  />} />
                                <Route path={pathBuilder('/dev')} element={<CurriculumVitae domain={EnumDomain.DEV} />} />
                                <Route path={pathBuilder('/maths')} element={<CurriculumVitae domain={EnumDomain.MATHS} />} />
                            </Routes> 
                        </BrowserRouter>
                    </div> 
                </AppContext.Provider>
            </div>
        </>
);

方法

pathBuilder(path)

返回这个：

const pathBuilder = (path) => {
    return `${process.env.NODE_ENV === 'production' ? '/cv' : ""}${path}`;
}

这是因为该应用程序是在 GitHub Pages

"https://[githubname].github.io/cv"

上提供的，而基域页面是

"https://[githubname].github.io"

，我必须添加后缀

'/cv'

，然后添加与该页面对应的好后缀（

'/'

、

'/dev'

、

'/maths'

）。

这是我的依赖项

package.json

：

    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "react-spa-prerender": "^1.0.14",

有人可以帮我解决这个问题吗？

提前谢谢您。

Answer 1

感谢@Drew Reese建议的帖子，实际上是因为我迁移到了 GitHub Pages，它不再支持BrowserRouter。

我分享适合我的代码。

我替换这个：

<BrowserRouter>
     <Routes>
         <Route exact path={'/'} element={<CurriculumVitae domain={EnumDomain.GENERIC}/>} />
         <Route path={'/dev'} element={<CurriculumVitae domain={EnumDomain.DEV} />} />
         <Route path={'/maths'} element={<CurriculumVitae domain={EnumDomain.MATHS} />} />
     </Routes> 
</BrowserRouter>

这样 :

<RouterProvider router={router} />

你只需要先创建路由器，方法是

createHashRouter()

:

import { createHashRouter, RouterProvider } from 'react-router-dom';


const router = createHashRouter(
     [
        {
            path: "/",
            errorElement: <Error />,
            children : [
                {
                    path: "/",
                    element: <CurriculumVitae domain={EnumDomain.GENERIC} />
                 },
                 {
                     path: "dev",
                     element: <CurriculumVitae domain={EnumDomain.DEV} />
                 },
                 {
                     path: "maths",
                     element: <CurriculumVitae domain={EnumDomain.MATHS} />
                 }
            ]
        }
    ]
);

现在我有3条路线：

1. 托管于

   "https://<github-name>.github.io/<git-repo>"

的家
2. 两条子路线托管于

   "https://<github-name>.github.io/<git-repo>/#/<subroute>"

Answer 2

在尝试从 React 应用程序中删除预渲染后，您似乎遇到了路线无法正常工作的问题。您可以检查以下几点并尝试解决问题：

1. 检查

   pathBuilder

   函数中的路径值：确保

   pathBuilder

   函数返回的路径与路线的实际路径匹配。例如，如果要匹配

   /dev

   ，请确保

   pathBuilder('dev')

   返回的路径是

   /dev

   ，而不仅仅是

   'dev'

   。

2. 删除不必要的路由嵌套：在第二种方法中，您在

   <Layout>

   组件中嵌套路由，请确保嵌套路由具有正确的路径，并且没有丢失任何前导斜杠（“/”）。例如，如果您想匹配

   /dev

   ，请确保该路由的路径为

   pathBuilder('/dev')

   。

3. 检查冲突的路由配置：确保不存在可能导致意外行为的冲突或重叠的路由配置。确保每条路线都有唯一的路径。

4. 验证react-router-dom的版本兼容性：仔细检查与路由相关的所有版本的包（

   react-router-dom

   ，

   react-scripts

   ）是否彼此兼容并且是最新的。

5. 检查浏览器控制台错误：在路线之间导航时，检查浏览器控制台中是否有任何错误消息或警告。这可以提供有关可能出现问题的宝贵信息。

通过检查这些方面并进行必要的调整，您应该能够排查并修复 React 应用程序的路由功能问题。