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

Posted 2023-02-22

【中文标题】react-router BrowserRouter与打字稿反应的问题？

【英文标题】：issue with react-router BrowserRouter in react with typescript?

【发布时间】：2020-01-13 09:27:36

【问题描述】：

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

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

【参考方案1】：

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

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

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

有效。

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

【讨论】：

嗨，谢谢，是的，我安装了 react-router 而不是 react-router-dom 并且没有意识到错误哈哈。

【参考方案2】：

根据 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 之间区别的 SO 问题，接受的答案包含以下内容。

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

【讨论】：

谢谢我很困惑，因为我做了 react-router 的 npm i 而不是 react-router-dom。