时间戳

首页 > 解决方案 > react-router BrowserRouter与打字稿反应的问题？

javascript - react-router BrowserRouter与打字稿反应的问题？

问题描述

我已经经历了几个类似的问题，但找不到有用的东西。我正在尝试从 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;

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

标签： javascriptreactjstypescriptapireact-hooks

解决方案

根据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是一个关于和之间区别的SO问题react-router-dom，接受的答案包含以下内容。

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

推荐阅读