1

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

我用 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 文件夹复制到新应用程序。

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

在过去的 2.5 天里，我一直被困在这个问题上，所以任何帮助都将不胜感激。非常感谢你。

更新：大家好。我是个白痴。该<Link>组件使用与标签to不同的属性。那是我的问题。真的。那么有 3 天的时间和你所有的时间都付诸东流了。无论如何，感谢您的帮助，我感谢您所做的一切。ahref

4

3 回答 3

3

编辑 - 决议的解释（如@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 路由需要被给予位置对象，它们可以用来比较它们的路径值。

你的 Route 被你的 App 对象包裹了，而没有向下传递位置对象。

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

const App = ({ location }) => (

随后，您可能必须访问路线中的位置：

<Route location={location} ...

此示例是我从以下位置获取信息的地方： https ://github.com/Remchi/bookworm-react/blob/master/src/App.js

于 2018-02-18T22:58:33.843 回答
2

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

于 2018-02-19T21:56:13.973 回答
0

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

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 ）

于 2018-02-19T02:29:55.327 回答