本地页面链接(<a href='#' />)不适用于哈希路由器

Question

我想在我的React网站上添加多个页面，所以我开始使用从React router dom导入的HashRouter。从那以后，只有我的主页加载，我再也不能使用页面中的本地链接了。我无法将用户重定向到主页上的特定区域，在我开始使用路由器导入之前，我曾经可以这样做。如果影响到任何内容，本网站也会使用github页面。

我目前使用的<a>标签如下：

<a className="nav-link" href="/#about-me">
About Me
</a>

URL显示为这样，下面没有内容

http://localhost:3000/#about-me

我也尝试过使用<Link>标记，但它最终只是重新加载了页面。

<Link className="nav-link" to="/#about-me">
About Me
</Link>

出现以下URL：

http://localhost:3000/#/#about-me

如何使页面向下滚动到id，而不是重新加载或加载空白页面

主要参考代码片段：

Home.js片段

const Home = () => {
return (
<div className='main'>
<section className='section-welcome'>
<Introduction />
</section>
<section id='about-me' className='section-about-me'>
<AboutMe />
</section>
</div>
);
};
export default Home;

Main.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home.js';
import NoPage from './Pages/NoPage.js';
const Main = () => {
return (
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path="*" element={<NoPage />} />
</Routes>
);
}
export default Main;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);

Answer 1

问题在于代码如何在GitHub页面上运行，而不是引用。

目前，每当在导航栏中单击链接时，网站都会尝试将URL加载为root/{href from <a> tag}。这与GitHub页面冲突，因为它搜索githubname.GitHub.io/project-name/下的链接，并且程序正在尝试显示githubname.jithub.io/#.

为了解决此问题，您需要在<Router>标记中添加一个基名称，以强制页面加载到/project-name/#。

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router basename={process.env.PUBLIC_URL}>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);

更多信息的相关链接

https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/

https://create-react-app.dev/docs/deployment/#building-对于相对路径