反应路由器 BrowserRouter 与打字稿反应的问题？

Question

我已经解决了几个类似的问题，但找不到有效的方法。我正在尝试从react-router引入BrowserRouter，但它说：

模块“../node_modules/@types/react-router”没有导出成员“BrowserRouter”

根据这里的另一个类似问题，我做了 @types/react 和 @types/react-router 的 npm 安装，但保存为开发依赖项。它们已经在我的 package.json 中，但作为常规依赖项。在此之前，他们在从“react”导入React时遇到了类似的问题。它会说找不到这些模块，路由器也是如此。然后当我安装时，这些错误消失了，但 BrowserRouter 开始显示此错误。我也尝试过“react-router-dom”。

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router';
import './App.css';

import Recipes from './components/Recipes';

const App: React.SFC = () => {

  return (
    <BrowserRouter>
      <main>
        <Switch>
          <Route exact path='/' component={Recipes} />
        </Switch>
      </main>
    </BrowserRouter>
  );
}

export default App;

只是期望错误不会出现并且能够定期导航。这是我第一次真正使用打字稿。

Answer 1

根据React Router 的文档BrowserRouter，从“react-router-dom”导入，而不是“react-router”。

这是上面链接中给出的示例代码。

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

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

这react-router是一个关于和之间差异的问题，react-router-dom并且接受的答案包含以下内容。

react-router 包含了react-router-dom 和react-router-native 之间的所有通用组件。什么时候应该使用其中一种而不是另一种？如果您在网络上，那么react-router-dom应该拥有您需要的一切，因为它还导出您需要的通用组件。如果你使用 React Native，出于同样的原因，react-router-native 应该拥有你需要的一切。所以你可能永远不需要直接从react-router导入任何东西。