从 HashRouter 中删除 #

我在用着react-router-dom对于我的路由，由于我也在使用 GitHub Pages，所以我需要使用HashRouter in my Router.jsx like so

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import Customer from './Customer';

const MyRouter = () => (
  <Router>
    <Switch>
      <Route path="/customer" component={Customer} />
      <Route path="/" component={Home} />
    </Switch>
  </Router>
);

export default MyRouter;

In my Home.jsx组件我已经像这样定义了我的 propTypes

Homepage.propTypes = {
  history: PropTypes.shape({ // set by react-router
    push: PropTypes.func.isRequired,
  }).isRequired,
};

我的问题是每次我得到一个#在我的 URL 中，我想知道为什么它一直存在，为什么我的本地主机没有#将我重定向到相同的 URL，但使用#（就像如果我去http://localhost:4000/myApp/ http://localhost:4000/myApp/它会将我重定向到http://localhost:4000/myApp/#/ http://localhost:4000/myApp/#/）。我想摆脱它以进行跟踪。我尝试过使用BrowserRouter但它不起作用，以及路由器的历史参数，例如history={createHashHistory({ queryKey: false })} or history={browserHistory}.

非常感谢（对我的英语感到抱歉）

由于客户端 React 应用程序的前端性质，路由有点麻烦。两个主要路由器选项的功能如下：

HashRouter在 URL 中使用哈希符号，这会导致服务器请求中忽略所有后续 URL 路径内容（即，您发送“www.mywebsite.com/#/person/john”，服务器会获取“www.mywebsite.com”） ”。结果服务器会返回预#URL 响应，然后是帖子#路径将由客户端反应应用程序解析来处理。

BrowserRouter不会附加#但是，当您尝试链接到页面或重新加载页面时，会产生问题。如果显式路由存在于您的客户端 React 应用程序中，但不存在于您的服务器上，则重新加载和链接（任何直接命中服务器的内容）将返回 404 未找到错误。

这个问题的解决方案可以在这篇广泛的帖子中看到：https://stackoverflow.com/a/36623117/2249933 https://stackoverflow.com/a/36623117/2249933

主要原则是，将客户端路由与服务器上的路由相匹配，这样就允许干净的 url，但不受浏览器路由器本身的限制。