Question

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

我使用create-react-app

创建了我的应用

当我尝试运行我的应用程序时，它会编译，但我收到一条错误消息： TypeError：location is undefined

此错误指向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;

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

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

过去2.5天我一直坚持这个问题，所以任何帮助都会非常感激。非常感谢你。

更新：嘿伙计们。我是个白痴。与<Link>代码to不同，a组件使用href属性。那是我的问题。真。那么有3天的时间耗尽你的所有时间。无论如何，谢谢你的帮助，我感谢你所做的一切。

Answer 1

编辑 - 解决方案说明（如@ Vishah的回答中所述）

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

问题的根源是包括的链接组件＆＃34; href＆＃34;属性而不是＆＃34;到＆＃34;属性。

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

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

这是他回购时的承诺：https://github.com/vishalmshah/MERNStackBoilerplate/commit/73fb3fe2e39ffa870fb91bd8b3592887886e3dbb

这不是问题的根源

我想我看到了这个问题。 BrowserRouter使用位置对象来跟踪您的位置，历史记录以及应用程序可能导航到的其他位置。

BrowserRouter路由需要给定位置对象，他们可以使用它们来比较它们的路径值。

您的路线被您的App对象包裹，但没有传递位置对象。

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

const App = ({ location }) => (

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

<Route location={location} ...

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

Answer 2

更新：嘿伙计们。我是个白痴。与标记的href不同，该组件使用to属性。那是我的问题。真。那么有3天的时间耗尽你的所有时间。无论如何，谢谢你的帮助，我感谢你所做的一切。

Answer 3

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

if let

你不能这样做......相反：

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

此外，您不应该安装react-router，而只需安装react-router-dom ...

这是App.js

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

这是Index.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;

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

React TypeError：位置未定义

3 个答案: