React :位置未定义

Question

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

我用创建反应应用程序创建了我的应用程序。

当我试图运行我的应用程序时，它会编译，但是我得到一个错误: TypeError: location是未定义的

此错误指向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模块，然后当我尝试再次构建它时，我使用了自定义的react脚本。当我弹出应用程序时，问题就开始了，但我确定这是否是问题所在，因为我确实重建了它，并将src文件夹复制到了新的应用程序中。

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

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

更新：嘿伙计们。我是个笨蛋。<Link>组件使用与a标记的href不同的to属性。那是我的问题。真的。好吧，三天之后，你的时间都在流失了。不管怎样，谢谢你的帮助，我很感激你所做的一切。

Answer 1

更新:嘿，伙计们。我是个笨蛋。与标签的href不同，组件使用to属性。那是我的问题。真的。好吧，三天之后，你的时间都在流失了。不管怎样，谢谢你的帮助，我很感激你所做的一切。

Answer 2

编辑-解析的解释(如@Vishah的答案所述)

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

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

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

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

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

这不是问题的来源

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

BrowserRouter路由要求指定位置对象，它们可以使用该对象来比较它们的路径值。

您已经得到了由App对象包装的路由，而没有向下传递location对象。

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

const App = ({ location }) => (

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

<Route location={location} ...

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

Answer 3

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

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

你不能这么做。相反：

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

另外，你不应该安装router路由器，而应该只安装react路由器.

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

注意:我没有创建页面目录，也使用了开关.(文档：https://reacttraining.com/react-router/web/api/Switch)