我正在创建一个ReactJS网站，问题是当用户单击EOF时，URL位置发生了变化，但是整个网页都变成了黑色，
<Link to="path">没有孩子，除非我重新加载页面，在这种情况下，页面通常会呈现。
在网络上搜索时，他们说要使用<div id="root"></div>来包装所有内容，并使用BrowserRouter，当然我已经尝试过了，但是仍然行不通。 / p>
这是我的代码 app.js
<Switch>我尝试在文件中的import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Indirizzi from "./Contenuti/Indirizzi";
import Bottone from "./Util/Bottone";
import MostraMaterie from "./Contenuti/MostraMaterie";
import "./App.css";
import FullNavBar from "./NavBar/FullNavBar";
function App() {
const [indirzzi, cambiaIndirizzi] = useState([]);
const fetchIndirizzi = async () => {
let indirizzi = await fetch(
"https://vps.lellovitiello.tk/Riassunty/API/indirizzi.php"
);
indirizzi = await indirizzi.json();
cambiaIndirizzi(indirizzi);
console.log(indirizzi);
};
useEffect(fetchIndirizzi, []);
return (
<Router>
<Switch>
<Route path="/mostraMateria/:id">
<MostraMaterie />
</Route>
<Route exact path="/">
<FullNavBar indirizzi={indirzzi} />{" "}
<Link to="/Login">
<Bottone TestoBottone="Per caricare un riassunto" />
</Link>{" "}
<Indirizzi key="Indirizzi" data={indirzzi} />{" "}
</Route>{" "}
</Switch>{" "}
</Router>
);
}
export default App;
周围移动，但结果始终相同。
唯一可行的方法是删除<Route path="/mostraMateria/:id">，但这将始终渲染另一个路由器，我该如何解决呢？
编辑 即使按照注释中的建议在两条路线上都添加了准确的字词，也仍然行不通。
app.js
<Switch>编辑2
即使在应显示的组件内部使用import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Indirizzi from "./Contenuti/Indirizzi";
import Bottone from "./Util/Bottone";
import MostraMaterie from "./Contenuti/MostraMaterie";
import "./App.css";
import FullNavBar from "./NavBar/FullNavBar";
function App() {
const [indirzzi, cambiaIndirizzi] = useState([]);
const fetchIndirizzi = async () => {
let indirizzi = await fetch(
"https://vps.lellovitiello.tk/Riassunty/API/indirizzi.php"
);
indirizzi = await indirizzi.json();
cambiaIndirizzi(indirizzi);
console.log(indirizzi);
};
useEffect(fetchIndirizzi, []);
return (
<Router>
<Switch>
<Route exact path="/mostraMateria/:id">
<MostraMaterie />
</Route>
<Route exact path="/">
<FullNavBar indirizzi={indirzzi} />{" "}
<Link to="/Login">
<Bottone TestoBottone="Per caricare un riassunto" />
</Link>{" "}
<Indirizzi key="Indirizzi" data={indirzzi} />{" "}
</Route>{" "}
</Switch>{" "}
</Router>
);
}
export default App;
和import { withRouter } from "react-router";也不起作用。
编辑3
我创建了一个新的React Project，并且路由起作用了，我现在的问题是，因为我有export default withRouter(MostraMaterie);可以将我的应用程序分解成另一个组件中的一个组件，依此类推，这可能是有问题吗？
答案 0 :(得分：2)