从 HashRouter 中删除 #

IT技术 reactjs react-router react-router-dom
2021-05-20 07:09:24

我用react-router-dom我的路由和，因为我还使用GitHub的页面，我需要用HashRouter我的Router.jsx，像这样

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;

在我的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/#/）。我想得到它的 rif 以进行跟踪。我试过使用，BrowserRouter但它不起作用，以及路由器的历史参数，如history={createHashHistory({ queryKey: false })}或history={browserHistory}。

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

3个回答

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

HashRouter在 URL 中使用哈希符号，它的作用是在服务器请求中忽略所有后续 URL 路径内容（即您发送“www.mywebsite.com/#/person/john”，服务器得到“www.mywebsite.com” "。因此，服务器将返回 pre #URL 响应，然后 post#路径将由您的客户端 react 应用程序解析处理。

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

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

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

HashRouter...是通过#（称为哈希）之后的所有内容进行导航。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

如果你不想那样，你可以尝试BrowserRouter- 编辑：我看到你说BrowserRouter不起作用。以什么方式？

我今天遇到了这个问题。我试图学习动态路由，我首先使用了 hashRouter。过了一会儿，我想摆脱哈希符号，然后了解到 hashRouter 的所有目的与我想要实现的完全不同。

但是，如果您了解当前的结构，则转换当前的 hashRouter 很容易。我正在使用webpack并在webpack-dev-server上测试它们，我有很多嵌套路由，这种方法对我有用。

import { createBrowserHistory } from "history";
import { Route, Switch, Redirect, BrowserRouter } from "react-router-dom";

const hist = createBrowserHistory();

<BrowserRouter history={hist}>
  <Switch>
    <Route path="/" component={ComponentName} />
  </Switch>
</BrowserRouter>

注意：除了 webpack 之外，还有一些配置要添加，如下所示；

在webpack.config.js 中

output: {
   ...
   publicPatch: "/",
   ...
}

devServer: {
   ...
   historyApiFallback: true,
   ...
}

我认为，

  1. publicPath 通过为它们提供预定路径来解决查找分块代码连接的问题（这是动态路由调用嵌套路由页面的问题）
  2. historyApiFallback 是这里的魔法。嵌套路由不会连接到 browserHistory，当您尝试请求链接时，因为这是客户端路由，它返回空白。但是如果你把 historyApiFallback 配置，dev-server 返回所有未知的链接到 index.html。这意味着所有嵌套的路由链接都被视为未知，但因为它将 index.html 加载给用户。用户可以使用他们确定的路由地址访问页面。
其它你可能感兴趣的问题
上一篇打印件沿 X 轴镜像并沿 Y 轴方向反转 下一篇如何访问另一个 mobx 商店中的 mobx 商店？