我想将我的react 代码部署到GitHub页面,但显然,它不支持BrowserRouter.后来我发现我需要使用HashRouter,但由于某种原因,页面不能工作.它只需将div设为根目录,其他任何内容都不会呈现.我try 呈现单个页面,但也不起作用.

Code for BrowserRouter:

import Home from './pages/Home.js'
import Skills from './pages/Skills.js'
import Test from './pages/test.js'
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Attributions from './pages/Attributions.js';
import { Social } from './pages/Social.js';
import { Experience } from './pages/Experience.js';
import { Projects } from './pages/Projects.js';
import Chart from './components/Chart.js';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home/>} />
        <Route exact path="/Skills" element={<Skills/>} />
        <Route exact path="/Attributions" element={<Attributions/>} />
        <Route exact path="/Experience" element={<Experience />} />
        <Route exact path="/Projects" element={<Projects />} />
        <Route exact path="/Socials" element={<Social/>} />
        <Route exact path="/test" element={<Test/>} />
        <Route exact path="/Chart" element={<Chart/>} />
      </Routes>
    </BrowserRouter>
    
  );
}

export default App;

Code for HashRouter:

import Home from './pages/Home.js'
import Skills from './pages/Skills.js'
import Test from './pages/test.js'
import {
  HashRouter,
  Routes,
  Route
} from "react-router-dom";
import Attributions from './pages/Attributions.js';
import { Social } from './pages/Social.js';
import { Experience } from './pages/Experience.js';
import { Projects } from './pages/Projects.js';
import Chart from './components/Chart.js';
function App() {
  return (
    
    <HashRouter>
      <Routes>
      <Route exact path="/" component={Home}/>
      <Route exact path="/Skills" component={Skills} />
      <Route exact path="/Attributions" component={Attributions} />
      <Route exact path="/Experience" component={Experience} />
      <Route exact path="/Projects" component={Projects} />
      <Route exact path="/Socials" component={Social} />
      <Route exact path="/test" component={Test} />
      <Route exact path="/Chart" component={Chart} />
      </Routes>
    </HashRouter>
  );
}

export default App;

所有的代码都在这里https://github.com/kakhil2004/Portfolio

推荐答案

要在Github页面上托管你的应用程序,你需要使用HashRouter,并确保你的Package.json文件指定的homepage与应用程序的托管位置相匹配.我看你的是"homepage": "http://kakhil2004.github.io/Portfolio",,所以再判断一下是不是正确的.

即使您使用的是HashRouter,react-router-dom@6Route组件仍然需要将它们的内容作为JSX呈现在elementprops 上.

示例:

<HashRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/Skills" element={<Skills />} />
    <Route path="/Attributions" element={<Attributions />} />
    <Route path="/Experience" element={<Experience />} />
    <Route path="/Projects" element={<Projects />} />
    <Route path="/Socials" element={<Social />} />
    <Route path="/test" element={<Test />} />
    <Route path="/Chart" element={<Chart />} />
  </Routes>
</HashRouter>

Node.js相关问答推荐

错误:找不到模块';/var/apps/前端/bash';

仅当所需文档是最后一个文档时才更新MongoDB,否则插入

对接Nestjs/VueJS应用程序

Node.js PNG缓冲区获取未知图像格式错误

如何在mongodb集合中设置数据限制?

try 使用Express和连接池将数据插入MySQL数据库时出现拒绝访问错误

后端如何保护数据不被用户提取其他用户的数据?

如果我在 tsx 文件中使用了use client,ssr 会如何发生?

无法通过 NextJS 访问 HTTP 帖子中的正文

具有项目外部子路径导入的 Firebase 函数

express cors request.body formData显示undefined

使用Typescript 时我应该避免循环导入吗?

是Electron 的密码和登录凭据的安全存储吗?

如何使动态私有IP地址静态?

NodeJs 过滤掉目录异步

使用 Node.JS,如何按时间顺序获取文件列表?

nodejs v10.3.0 的 gulp 任务问题:src\node_contextify.cc:629: Assertion `args[1]->IsString()' failed

node.js 在控制台上显示未定义

如何在 node.js 沙箱中安全地运行用户提交的脚本?

promise 回调返回promise