【发布时间】:2021-02-17 23:54:33
【问题描述】:
我一直在寻找,无法弄清楚为什么会发生这种情况。我一直在看到所有不同的答案。这是我的 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 也会将我带到商店页面,所以我不知道发生了什么我对路由器不太熟悉。
【问题讨论】:
-
您确定此错误来自这些文件吗?没有提到
location -
@StudioTime 是的,这就是让调试变得如此困难的原因,因为我的代码与我正在处理的另一个项目几乎完全相同。我使这个应用程序对移动设备更加友好。但底层代码基本相同。超级不可预测
-
通过代码很难发现任何错误。你能在沙盒中重现吗?
-
@buzatto 如果可行,我可以将它临时托管在 netlify 上
-
从菜单组件中删除路由器。你是如何使用菜单组件的?我没有看到它在 App 组件中使用。
标签: javascript reactjs react-router react-router-dom