React TypeError: location is undefined

Question

我目前正在创建样板反应应用程序。我一直在关注 these 个教程，但我一直无法通过第一个教程。

我使用 create-react-app 创建了我的应用程序

当我尝试运行我的应用程序时，它可以编译，但我收到一条错误消息：类型错误：位置未定义

此错误指向此代码中的 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();

如果相关，这也是我的 app.js 文件

import React from 'react';
import { Route } from 'react-router-dom';
import { HomePage, LoginPage } from "./components/pages";
import { Grid } from 'react-flexbox-grid';
import 'react-flexbox-grid/dist/react-flexbox-grid.css';

const App = () => (
  <Grid fluid>
    <Route path='/' exact component={HomePage} />
    <Route path='/login' exact component={LoginPage} />
  </Grid>
)

export default App;

我也试过创建一个新的 React 应用程序。第一次，我弹出了应用程序，以便我可以添加 css 模块，然后当我再次尝试构建它时，我使用了自定义反应脚本。问题开始于我弹出应用程序时，但我确定这是否是问题所在，因为我确实重建了它并将 src 文件夹复制到新应用程序。

最后，here 是我遇到的错误的屏幕截图。

在过去的 2.5 天里，我一直被这个问题困扰着，所以非常感谢任何帮助。提前谢谢你。

更新：大家好。我是个白痴。 <Link> 组件使用 to 属性，这与 a 标签的 href 不同。那是我的问题。真的。好吧，你所有的时间都花光了 3 天。无论如何，谢谢你的帮助，我很感激你所做的一切。

Answer 1

编辑 - 决议解释（如@Vishah 的回答所述）

我在此处添加编辑，希望能帮助遇到此问题的任何人。

问题的根源是链接组件包含 "href" 属性而不是 "to" 属性。

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

此外，值得注意的是 "href" 没有抛出属性错误，因为小写属性在 React ^16.2 中仍然有效 dom。

这是他的回购协议的提交：https://github.com/vishalmshah/MERNStackBoilerplate/commit/73fb3fe2e39ffa870fb91bd8b3592887886e3dbb

这不是问题的根源

我想我明白了。 BrowserRouter 使用 location 对象来跟踪您的位置、您的历史记录以及应用程序可能导航到的其他位置。

BrowserRouter 路由需要被赋予位置对象，它们可以用来比较它们的路径值。

您的路线已被 App 对象包裹，而没有向下传递位置对象。

尝试通过您的应用传递位置信息：

const App = ({ location }) => (

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

<Route location={location} ...

这个例子是我从中获得信息的地方： https://github.com/Remchi/bookworm-react/blob/master/src/App.js

Answer 2

我立即注意到的一件事是您导入组件的方式...

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;

这里是 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();

注意：我没有创建 pages 目录，我也在使用 Switch...（文档：https://reacttraining.com/react-router/web/api/Switch）

Answer 3

更新：大家好。我是个白痴。与 a 标签的 href 不同，该组件使用 to 属性。那是我的问题。真的。好吧，你所有的时间都花光了 3 天。无论如何，谢谢你的帮助，我很感激你所做的一切。

React TypeError: location is undefined

React TypeError: location is undefined

node.js

reactjs

react-router

mern

react-router-dom