React Router 不适用于 Github 页面 [已弃用]

自从我发布这个问题以来，React Router 发生了翻天覆地的变化，所以对话可能不再相关。

我以前的网站仅在单击主页选项卡时显示主页，然后如果您单击我的导航栏品牌，则会显示 404。这个网站在带有 npm start 的创建-反应-应用程序上工作，但它在这里不起作用，在构建中也不起作用。我不知道应用程序出了什么问题，也许路由器设置搞砸了，我不知道。我已经链接了我设置路由器的应用程序和索引页面。如果您需要更多信息，请向我询问更多信息。

谢谢

指数

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import './styles/index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

应用程序

import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Home from "./routes/Home";
import Project from "./routes/Project";
const App = () => {
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/project" element={<Project />}></Route>
<Route path="/contact" element={<Contact />}></Route>
</Routes>
</>
);
};
export default App;

如果部署到 GitHub，请确保 package.json 中有一个"homepage"条目，用于在 Github 中托管它的位置。

例：
```
"homepage": "https://github.com/amodhakal/portfolio",
```

切换到HashRouter，因为 GitHub 页面不支持BrowserRouter使用的技术。

指数

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import App from './App';
import './styles/index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>
);

react-router@6.4+数据路由器

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
createHashRouter,
RouterProvider
} from 'react-router-dom';
import App from './App';
import './styles/index.css';
const router = createHashRouter([
{
path: "/*",
element: <App />,
}
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);

有关更多详细信息，请参阅部署到 GitHub 页面的create-react-app文档和有关客户端路由的说明。

当我使用gh-pages时，我在 ReactJs 中遇到了类似的路由问题。

我的问题：路由在我的本地系统中运行良好，但是当我使用gh-pages部署我的 Web 应用程序时，我无法直接转到子页面。

示例：ayushjaink8.github.io/cfhelper正在工作，我可以从 Web 应用程序中转到其他页面。但是当我在 URL 中输入ayushjaink8.github.io/cfhelper/dashboard时，它会显示 github 404 错误页面。

解决方案：我通过使用<HashRouter/>并在package.json中添加主页标签解决了上述问题，就像homepage: "/<repository-name>/#"一样。

请注意，gh-pages在其 URL 路由中也遵循#规则。因此，如果您编写ayushjaink8.github.io/cfhelper/#/<any-route-of-your-app>，它不会显示任何 404 错误页面。

在我的代码库中，其他所有内容都保持不变。我没有使用useHistory()、<BrowserRouter />或任何其他功能。大多数时候只使用<HashRouter/>有效。

您的主页变为/<repo-name>/#而不是/<repo-name>。这是使用时唯一会改变的事情<HashRouter/>.

例如，以前的主页是：https://ayushjaink8.github.io/cfhelper/使用<HashRouter/>，URL 现在变为：https://ayushjaink8.github.io/cfhelper/#

这也适用于路线。

这是我的示例代码：

import { Routes, Route, HashRouter } from "react-router-dom";
<HashRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/auth/login" element={<Login />} />
<Route path="/auth/signup" element={<Signup />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/contests/create" element={<CreateContest />} />
<Route exact path="/contests/join" element={<JoinContest />} />
<Route path="/contests/live" element={<LiveContest />} />
<Route path="/practice" element={ <Practice /> } />
<Route path="/analyze" element={ <Analyze /> } />
<Route path="/verify" element={<VerifyEmail />} />
<Route path="/profile/edit" element={<EditProfile />} />
</Routes>
<Footer />
</HashRouter>

Package.json 示例代码：

{
"name": "cfhelper",
"homepage": "/<your-github-repo-name>/#",
"version": "1.0.0",
"private": true,
}

我的 2 美分。

在package.json中添加homepage，例如：

"homepage": "https://volodalexey.github.io/test_swapi_ant",

应用程序中添加不同的路由器类型。例如src/routes/router.tsx：

import React from 'react'
import {
createHashRouter,
createBrowserRouter,
createRoutesFromElements,
Route
} from 'react-router-dom'
import { HomeLayout } from '../layouts/HomeLayout'
const routes = createRoutesFromElements(
<Route>
<Route index element={<HomeLayout />}
</Route>
)
export const router = process.env.HASH_ROUTER === 'true' ? createHashRouter(routes) : createBrowserRouter(routes)

使用此路由器，例如在src/App.tsx：

import React, { type ReactElement } from 'react'
import { RouterProvider } from 'react-router-dom'
import { router } from './routes/router'
function App (): ReactElement {
return (
<RouterProvider router={router} />
)
}
export default App

与 webpack 一起使用不同的HASH_ROUTER值。例如webpack.config.js：

const { DefinePlugin } = require('webpack')
module.exports = {
...
plugins: [
new DefinePlugin({
'process.env.HASH_ROUTER': JSON.stringify(process.env.HASH_ROUTER || 'false')
})
]
...
}

准备不同的构建脚本。例如，用于资源使用(本地或部署到自己的服务器)的历史路由器和用于 GitHub 页面的哈希路由器。例如在package.json：

"scripts": {
"build": "webpack",
"build-github": "HASH_ROUTER=true webpack",
"serve": "webpack serve"
},

构建 github 页面npm run build-github并推送到gh-pages分支(例如，在我的情况下只有dist文件夹)git subtree push --prefix dist origin gh-pages。

请参阅我的存储库 https://github.com/volodalexey/test_swapi_ant 中的示例

如果您使用的是 HashRouter，您的锚点应如下所示：

<a href="#/endpoint"></a>

而不是

<a href="/endpoint"></a>

下面是HashRouter的一个例子：

<HashRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/endpoint" element={<MyComponent />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</HashRouter>

在花了这么多小时之后，我意识到了这一点。希望这会帮助某人。

当我使用 gh-pages 时，我在 ReactJS 中遇到了这个问题。

我的问题：路由在我的本地系统上运行良好，但是当我将我的 Web 应用程序部署到 gh-pages 时，它不起作用。

就像其他答案一样，首先：

确保 package.json 中有一个"主页"条目，用于您在 GitHub Pages 上托管它的位置。

例：

"homepage": "https://{username}.github.io/{repository-name}/",

将浏览器路由器切换到哈希路由器。

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>
);

我像这样使用锚元素：

<a href="/">Home</a>
<a href="/about">About</a>

它正在我的本地主机上工作，但在我的 GitHub 页面中，它给了我错误 404：找不到页面，我找到了解决此问题的两种解决方案。

第一个解决方案：将锚元素的 href 属性更改为您在 GitHub 页面中托管的位置。

例如：

<a href="https://{username}.github.io/{repository-name}/">Home</a>
<a href="https://{username}.github.io/{repository-name}/about">About</a>

这对我有用。但是现在您将无法在本地主机上对其进行测试。但是，如果您想坚持使用锚元素或链接元素，此解决方案有效。

第二个解决方案：这是我发现效果最好的解决方案。更改锚元素或将元素链接到按钮，并添加 onClick 事件以使用 useNavigate 更改页面。

应用.js

import Home from './pages/Home';
import About from './pages/About';
import { Routes, Route, useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
return 
<>
<button onClick={() => navigate('/')}>Home</button>
<button onClick={() => navigate('/about')}>About</button>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/about" element={ <About/> } />
</Routes>
</>
}
export default App;

希望这有帮助。

//将基本名称添加到浏览器路由器组件

<BrowserRouter basename='/reponame'>
<App/>
<BrowserRouter/>

想通了。这是因为网址结构。

https://umair-mirza.github.io/safetyapp/

意味着您必须为/safetyApp 定义路由

喜欢这个：

<Route path='/safetyapp' element={<Home />} />

指数

应用程序

相关内容

最新更新

热门标签：