给我的反应路由器无法读取未定义的位置属性。 （反应路由器 dom 版本 5.2.0）

Question

我一直在寻找，无法弄清楚为什么会这样。 我一直在看到所有不同的答案。 这是我的 App.js：

import React, { useState } from "react";
import "./App.css";
import Hero from "./Hero";
import Home from "./pages/Home";
import Store from "./pages/Store";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <>
      <Router>
        <Hero />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/store" exact component={Store} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

这是包含链接的菜单的代码：

import React from "react";
import { Link, Router } from "react-router-dom";
import "./Menu.css";

function Menu() {
  return (
    <Router>
      <div className="menuCont">
        <ul className="menuList">
          <li className="menuItem">
            <Link to="/">
              <div>
                <h1 className="menuText">Home</h1>
              </div>
            </Link>
          </li>
          <li className="menuItem">
            <Link to="/store">
              <div>
                <h1 className="menuText">Store</h1>
              </div>
            </Link>
          </li>
          <li className="menuItem">
            <Link to="/">
              <div>
                <h1 className="menuText">Contact</h1>
              </div>
            </Link>
          </li>
          <li className="menuItem">
            <Link to="/">
              <div>
                <h1 className="menuText">About</h1>
              </div>
            </Link>
          </li>
        </ul>
      </div>
    </Router>
  );
}

export default Menu;

我一直无法得到一个适合我的好答案。 这种行为似乎不可预测，特别是因为这段代码与我在我制作的另一个应用程序中使用的代码几乎相同。 另外在 url 中输入 /store 会将我带到商店页面，所以我不知道发生了什么，我对路由器不太熟悉。

Answer 1

好吧，关于不可预知的行为，我只重新安装了 react-router-dom，这次我指定npm install react-router-dom@5并且它起作用了，我可能永远不会知道 wtf 刚刚发生。 对不起，我无法提供更详细的描述。 当前版本可能搞砸了。 我真的不知道