带有历史记录的 React 路由器 v5 - 路由上不显示任何内容

Question

我正在为我在这里缺少的东西而努力。只要我使用BrowserRouter，我的路由就可以正常工作：

import { BrowserRouter as Router } from 'react-router-dom'

但现在我想以编程方式在我的组件之外导航（在传奇中），为此我切换到 Router 和 history

// history.js
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history

// index.js
import { Router } from 'react-router-dom'
import history from './app/history'

  ReactDOM.render(
    <Provider store={store}>
      <ThemeProvider>
        <Router history={history}>
          <Component />
        </Router>
      </ThemeProvider>
    </Provider>,
    document.getElementById('root')
  )

现在，当我点击刷新时，我会看到路线的内容，但如果我尝试使用历史记录或单击 Link 进行导航，则不会呈现任何路线，只是 url 发生变化。

我错过了什么？

我也试过import { Router } from 'react-router'，但没用。

提前致谢！

Answer 1

似乎很多人都在讨论这个问题，因为使用history 最新版本>=5 导致了这个问题。

它似乎与4.x 版本（例如4.10.1）一起正常工作，因此您可能需要降级history 版本才能使其暂时正常工作。

{
  "history": "4.10.1",
}

以下是未解决的问题：

• https://github.com/ReactTraining/history/issues/803
• https://github.com/ReactTraining/history/issues/804
• https://github.com/ReactTraining/history/issues/805

我猜有人正在解决这个问题。让我们看看然后我们会再次更新。