Question

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

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

根据这里的另一个类似问题，我做了@ types / react和@ types / react-router的npm安装，但保存为dev依赖项。它们已经在我的package.json中，但作为常规依赖项。在此之前，他们从“反应”导入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的documentation，BrowserRouter是从“ react-router-dom”而不是“ react-router”导入的。

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

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

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

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

react-router包含react-router-dom和react-router-native之间的所有公共组件。什么时候应该使用另一个？如果您在网络上，则react-router-dom应该具有所需的一切，因为它还可以导出所需的常用组件。如果您使用的是React Native，则出于相同的原因，react-router-native应该具有所需的一切。因此，您可能永远不必直接从react-router导入任何东西。

Answer 2

我也尝试过“ react-router-dom”。

它应该工作，例如这段代码

import { BrowserRouter, Route, Switch } from "react-router-dom";

有效。

应同时安装react-dom和react-router-dom软件包。这意味着两者都可以在dependencies文件的package.json部分中找到。可以在here中找到使用Typescript的工作示例项目。

React-Router BrowserRouter与打字稿反应的问题？

2 个答案: