Node.js 反应类型错误：位置未定义

我目前正在创建一个样板react应用程序。我一直在学习教程，但我还没能通过第一个教程

我用CreateReact应用程序创建了我的应用程序

当我尝试运行我的应用程序时，它会编译，但我收到一个错误，上面显示： TypeError:位置未定义

此错误指向代码中的ReactDOM.render（行）

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(
这是我得到的错误截图

在过去的2.5天里，我一直在解决这个问题，因此非常感谢您的帮助。提前非常感谢

更新：嘿，伙计们。我是个白痴。
组件使用了一个
to
属性，与
标签的
href
不同。这是我的问题。真的。三天的时间都白白浪费了。无论如何，谢谢你的帮助，我感谢你所做的一切。
编辑-解释决议的修订（如@Vishah的回答所述）

我在这里添加了一个编辑，希望能帮助任何遇到这个问题的人

问题的根源是链接组件包含“href”属性，而不是“to”属性

-        <Link href='/'>Home</Link>
+        <Link to='/'>Home</Link>

随后，您可能需要访问路线中的位置：

<Route location={location} ...

编辑-分辨率解释（如@Vishah的回答所述）

我在这里添加了一个编辑，希望能帮助任何遇到这个问题的人

问题的根源是链接组件包含“href”属性，而不是“to”属性

-        <Link href='/'>Home</Link>
+        <Link to='/'>Home</Link>

随后，您可能需要访问路线中的位置：

<Route location={location} ...

我立即注意到的一件事是您如何导入组件

import { HomePage, LoginPage } from "./components/pages";

您不能这样做…而是：

import HomePage from './components/pages/HomePage';
import LoginPage from './components/pages/LoginPage';

另外，您不应该安装react router，而应该安装react router dom

这是App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import LoginPage from './LoginPage';

const App = () => (
  <Switch>
    <Route path="/" component={HomePage} exact={true} />
    <Route path="/login" component={LoginPage} exact={true} />
  </Switch>
);

export default App;

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“./HomePage”导入主页；
从“/LoginPage”导入登录页面；
常量应用=（）=>(
);
导出默认应用程序；

这是Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“./components/App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(
)
我立即注意到的一件事是您如何导入组件

import { HomePage, LoginPage } from "./components/pages";

您不能这样做…而是：

import HomePage from './components/pages/HomePage';
import LoginPage from './components/pages/LoginPage';

另外，您不应该安装react router，而应该安装react router dom

这是App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import LoginPage from './LoginPage';

const App = () => (
  <Switch>
    <Route path="/" component={HomePage} exact={true} />
    <Route path="/login" component={LoginPage} exact={true} />
  </Switch>
);

export default App;

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“./HomePage”导入主页；
从“/LoginPage”导入登录页面；
常量应用=（）=>(
);
导出默认应用程序；

这是Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“./components/App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(
)
更新：嘿，伙计们。我是个白痴。组件使用的to属性不同于a标签的href。这是我的问题。真的。好了，三天的时间都白白浪费了。谢谢你们的帮助，我感谢你们所做的一切。
更新：嘿，伙计们。我是个白痴。组件使用的to属性不同于a标签的to属性href.那是我的问题。真的。三天的时间都白白浪费了。谢谢你的帮助，我感谢你所做的一切。
我很确定你遇到的错误是因为渲染器找不到“根”要挂接的dom元素。你在html文件中有一个js源代码吗？我在html文件中已经有了一个。还有什么可以阻止它运行的吗？应用程序中使用了
location
？任何
location
变量、道具等？我已经查看了我写的所有内容。我不知道我想我在任何地方都使用过location这个词。你安装了
react router
包吗？我很确定你得到的错误是因为渲染器找不到“根”要挂接的dom元素。你在html文件中有一个js源代码吗？我在html文件中已经有了一个。还有什么可以阻止它运行的吗？应用程序中使用了
location
？任何
location
变量、道具等？我已经查看了我写的所有内容。我不知道我想我在任何地方都用过location这个词。你安装了
react router
软件包吗？我只是把它添加到我的代码中，但它不起作用。我假设你这么做的意思是传递location:
const-App=（{location}）=>（）
这就是你的意思，还是我应该做些别的什么。还有，这就是第一个教程末尾的代码。那里没有位置。明白了。是的，这是我的意图。你介意向我提供你正在使用的应用程序的版本吗？我现在无法完成，但我稍后会看一看，看我能否完成我刚刚创建了一个。无论如何，非常感谢你的帮助。我真的很感激。我只是将它添加到我的代码中，但它不起作用。我假设你这样做是为了传递位置：
const-App=（{location}）=>（）
这就是你的意思，还是我应该做些别的。还有，这就是第一个教程结尾的代码。那里没有位置。明白了。是的，这是我的意图。你介意向我提供你正在使用的应用程序的版本吗？我现在无法完成，b