Question

首先，我是Typescript和React领域的初学者，所以请多多包涵。

我遇到的问题是每当我使用例如swag包中显示为“ NavLink”或“ Link”的按钮，结果只是URL更改，而没有呈现任何内容。

如果我按地址栏上的Enter键（强制运行给定的URL），则组件将呈现，否则只能看到我的应用背景。

我在SO和其他网站上可以找到的所有其他问题的不同之处在于，我使用的不是react-router-dom，而是BrowserRouter，因此我可以使用{ {1}}并将其传递到路由器，并在需要时从MobX使用它。

最奇怪的是-我在另一个应用程序中使用了相同的代码进行路由，并且工作正常。那里的react-router版本是5.1.3，现在我有5.1.5，所以我想这是我看不到的其他东西。

更奇怪的是-如果我改用Router而不是低级版本，则一切正常-似乎我使用的createBrowserHistory()包可能存在问题？

index.tsx：

BrowserRouter

App.tsx：

history

有关如何使用NavLinks的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import "./app/layout/styles.css";
import App from './app/layout/App';
import * as serviceWorker from './serviceWorker';
import 'semantic-ui-css/semantic.min.css'
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

export const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
);

serviceWorker.unregister();

Answer 1

因此，显然与“历史”包有关。

我删除了以前安装的历史记录程序包（yarn remove history），一切都对我有用。似乎在将此程序包添加到项目中时过于活跃。现在导入指向node_modules/@types/history/index，我没有明确安装它，可能是依赖项。

即使问题与答案没有真正的关系，我也将保留原样-也许有人会遇到相同的问题并偶然发现。我希望我有这种可能性：）

Answer 2

切换到 BrowserRouter 可以忽略此类问题，但只是为了了解实际问题。这是为那些真正想使用低级路由器的人准备的。问题在于您安装的历史包。尝试使用之前的版本，例如 4.7.2，它允许您从 history/createBrowserHistory 导入默认导出 createHistory，而不是直接从历史记录导入名为 export createBrowserHistory 的最新版本。

根据我的经验，最新的历史记录让您仅在页面刷新时更改路由，而且对于导航链接或链接，它不会匹配任何路由，只是更改了 url。

好吧，希望它对某人有所帮助。

来自React-Router-Dom的底层路由器仅导航到新URL，但不呈现组件

2 个答案: