Question

-更新：当我刚刚停止开发服务器，退出VSCode并再次重新启动它时，此方法开始起作用。不知道是什么原因造成的。

忙于学习React并遇到此错误。我曾尝试过其他几篇SO帖子，但似乎无法解决我的问题。

我正在遵循仅使用react-router-dom的指导，并从react-router-dom导入BrowserRouter和Route。但是我遇到一个错误：

./src/App.js
Attempted import error: 'Route' is not exported from 'react-router-dom'.

不确定我在做什么错吗？

这是我的App.js

import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <div className="App">
        <Navbar />
        <Route path='/' component={Home} />
      </div>
      </BrowserRouter>
    );
  }
}

export default App;

这是我的package.json：

  "name": "poketimes",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

从我一直在阅读的内容来看，其他帖子仍然单独使用react-router，但是如果我正确地理解了文档，那么我不应该在此版本中这样做吗？另外，我正在遵循一个完全可以做到这一点的教程，它似乎可以正常工作。

任何建议将不胜感激，谢谢！

Answer 1

关闭服务器，然后重新启动。效果很好。

npm start或yarn start

Answer 2

我遇到了同样的问题。您可能与NPM和YARN有冲突。我删除了yarn.lock并仅使用package.lock再次运行；而且有效。

您应仅使用Yarn或NPM。

Answer 3

import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route ,Switch} from 'react-router-dom'
import Home from './components/Home'

class App extends Component {
render() {
  return (
    <BrowserRouter>
     <div className="App">
     <Navbar />
      <Switch>
      <Route exact path='/' component={Home} />
    </Switch>

    </div>
    </BrowserRouter>
   );
  }
  }

  export default App;

尝试这种方式

Answer 4

似乎路由在以后的版本中已被贬值，因此请使用以下导入。为我工作。

从“ react-router-dom / Route”导入{Route}；

Answer 5

我也被困在这... 对我来说，当“ react-router”和“ react-router-dom”的版本匹配时，它就起作用了。

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

Answer 6

可能是因为您尚未安装而进行安装。您应该运行以下命令：

npm i react-router

Answer 7

请重新检查BrowserRouter的拼写，否则，如果拼写正确，请使用CTRL + C重新启动npm，并

using System.Collections.Generic;
using RestSharp;
using Newtonsoft.Json.Linq;

private static string API_KEY = Environment.GetEnvironmentVariable("BITLY_ACCESS_TOKEN");
private static string API_URL = "https://api-ssl.bit.ly/v4";

private static string Shorten(string longUrl)
{
    var client = new RestClient(API_URL);
    var request = new RestRequest("shorten");
    request.AddHeader("Authorization", $"Bearer {API_KEY}");
    var param = new Dictionary<string, string> {
        { "long_url", longUrl }
    };
    request.AddJsonBody(param);
    var response = client.Post(request);
    string content = response.Content;
    // WriteLine(content);
    JObject d = JObject.Parse(content);
    var result = (string)d["id"];
    return result;
}

Answer 8

您应该将此行添加到组件中。

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

这种方法解决了我的问题。

Answer 9

问题在我体内解决了

npm卸载react-router npm卸载react-router-dom

然后

npm install react-router react-router-dom

使用版本5.0.0

Answer 10

您需要确定 App 类中的返回类型。您正在返回 BrowserRouter。因此，当您进行导入时，您需要确保输入正确的类名。

返回的是BrowserRouter 而不是Router。

应该是这样

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

或

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

Answer 11

像这样安装 react-router 和 react-router-dom：

npm install react-router@next react-router-dom@next

Answer 12

发生错误是因为您使用的是 react router v5 而不是 v6-

请按照以下步骤操作-

第 1 步：npm uninstall react-router npm uninstall react-router-dom
第 2 步：npm install react-router@next react-router-dom@next
第 3 步：Restart your server

你们都准备好了！

Answer 13

这个问题是由于 react-router-dom 的版本造成的。尝试将 react-router-dom 更新到版本 6。

只需运行命令：

npm install react-router-dom@6.0.0-beta.0

如何修复错误：尝试导入错误：“路由”未从“反应路由器本地”导出

13 个答案: