Hashrouter маршрутизатора React перенаправляет на url-адрес тега

на самом деле это из history. Если вы видите код, они используют только createHashHistory и set children. Так что это эквивалентно этому:

import React from 'react';
import { Route, Router } from 'react-router-dom';
import { createHashHistory } from 'history';

const Root = () => <div>Root route</div>;
export default class App extends React.Component {

  history = createHashHistory({
    basename: "", // The base URL of the app (see below)
    hashType: "slash", // The hash type to use (see below)
    // A function to use to confirm navigation with the user (see below)
    getUserConfirmation: (message, callback) => callback(window.confirm(message)),
  });


  render() {
    return (

      <Router history={this.history}>
      <div>Router
        <Route exact path="/" component={Root} />
      </div>
      </Router>
      );
    }
}

он покажет ту же проблему, что и у вас. Тогда, если вы измените history такой код:

import {createBrowserHistory } from 'history';

...

history = createBrowserHistory({
    basename: "", // The base URL of the app (see below)
    forceRefresh: false, // Set true to force full page refreshes
    keyLength: 6, // The length of location.key
    // A function to use to confirm navigation with the user (see below)
    getUserConfirmation: (message, callback) => callback(window.confirm(message))
});

тогда ваша проблема исчезнет, но определенно не использовать hash. Так что проблема не от HashRouter а от history.

потому что это происходит от history давайте посмотрим этот нить. После прочтения этой темы мы можем сделать вывод, что это характеристика С history.

так, если вы установите <base href="/">, потому что вы используете hash ( # ), когда браузер загружен ( на самом деле после componentDidMount) он будет добавлять hash (#) в вашем случае some/static/page =>some/static/page + / =>/ + #/ =>/#/. Вы можете зарегистрироваться componentDidMount set debugger поймать перед добавлением маршрута.

решение

просто, просто удалите элемент <base href> или не использовать HashRouter.

если еще нужно, но хотите, чтобы избежать определенных component, просто поставьте это перед class:

const base = document.querySelector("base");
base.setAttribute('href', '');

обновление

так как вы хотите сохранить base тег, чтобы сохранить ссылку persist и использовать hash маршрутизатор, вот близкое решение, я думаю.

1. Установить тег base пустое.

const base = document.querySelector('base');
base.setAttribute('href', '');

ставим этот код в App component (root wrap component) для вызова однажды.

2. Когда componentDidMount установить его обратно

componentDidMount() {
  setTimeout(() => {
    base.setAttribute('href', '/');
  }, 1000);
}

используя тайм-аут для ожидания реакции, выполните рендеринг виртуального dom.

это очень близко, я думаю (проверить его). Потому что вы используете hash маршрутизатор, ссылка из индекса html будет безопасной (не переопределять react, но держать base tag). Также он работает с css link <link rel="stylesheet" href="styles.css"> как хорошо.