Question

我正在使用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,
};

我的问题是，每当我在网址中获得#时，我想知道为什么它一直存在，为什么我的localhost没有#将我重定向到相同的网址但是使用#（如果我转到http://localhost:4000/myApp/，它会将我重定向到http://localhost:4000/myApp/#/）。我想获得它的rif用于跟踪目的。我已尝试使用BrowserRouter，但它不起作用，以及路由器的历史参数，如history={createHashHistory({ queryKey: false })}或history={browserHistory}。

非常感谢（对不起我的英语）

Answer 1

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

HashRouter在URL中使用哈希符号，这会在服务器请求中忽略所有后续URL路径内容（即您发送＆＃34; www.mywebsite.com /＃/ person /约翰＆＃34;服务器得到＆＃34; www.mywebsite.com＆＃34;。因此，服务器将返回前# URL响应，然后将处理帖子#路径通过客户端解析应用程序解析。

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

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

主要原则是您将客户端路由与服务器上的路由匹配，以便允许干净的网址，但不受浏览器路由器的限制。

Answer 2

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

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

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

Answer 3

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

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

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,
   ...
}

据我了解，

publicPath通过给它们分配分块代码连接来解决查找分块代码连接的问题预定路径（这是调用动态路由时的问题嵌套的路由页面）
historyApiFallback是这里的魔力。嵌套路由不会连接到browserHistory，当您尝试请求链接时（因为这是客户端路由），它将返回空白。但是，如果您放置了historyApiFallback配置，则开发服务器会将所有未知链接返回到index.html。这意味着所有嵌套的路由链接都被视为未知链接，但是因为它会将index.html加载到用户。用户可以使用确定的路由地址访问页面。

从HashRouter中删除＃

3 个答案: