[英]React Router changes the URL but doesn't rerender the component
I'm making a ReactJS websites, the problem is that when the user click on a <Link to="path">
the URL location changes, but the whole webpage becomes black and inside the <div id="root"></div>
there is no child, except if I reload the page, in that case the page will normally render.我正在制作一个 ReactJS 网站,问题是当用户单击
<Link to="path">
时,URL 位置发生变化,但整个网页变黑并在<div id="root"></div>
内<div id="root"></div>
没有子项,除非我重新加载页面,在这种情况下页面将正常呈现。
Searching in the web, they say to use BrowserRouter
that wraps all the content, and to use the <Switch>
, and of course I've tried it, but still don't work.在web中搜索,说用
BrowserRouter
包裹所有内容,用<Switch>
,当然我试过了,还是不行。
This is my code app.js这是我的代码app.js
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;
I've tried to move around the <Route path="/mostraMateria/:id">
around in the file, but the result is always the same.我试图在文件中移动
<Route path="/mostraMateria/:id">
,但结果总是一样的。
The only way to let this work is to remove the <Switch>
but this will render the other router always, how can I solve if this is solvable?让它工作的唯一方法是删除
<Switch>
但这将始终呈现另一个路由器,如果这是可解决的,我该如何解决?
edit Even adding exact as suggested in the comments to both routes still doesn't work.编辑即使按照评论中的建议向两条路线添加精确的内容仍然不起作用。
app.js应用程序.js
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;
Edit 2编辑 2
Even using import { withRouter } from "react-router";
甚至使用
import { withRouter } from "react-router";
and export default withRouter(MostraMaterie);
并
export default withRouter(MostraMaterie);
inside the component that should be shown doesn't work.在应该显示的组件内部不起作用。
Edit 3编辑 3
I've created a new React Project, and there the routes work, my question now is, because I've the <Link>
that breaks my app inside a component inside another and so on, could this be the problem?我创建了一个新的 React 项目,路由在那里工作,我现在的问题是,因为我的
<Link>
破坏了我的应用程序在另一个组件内的组件等等,这可能是问题所在吗?
I've solved my problem, how?我的问题解决了,怎么解决? I don't know.
我不知道。
I was fixing warnings given by the console, and suddenly start working.我正在修复控制台给出的警告,然后突然开始工作。
The error I fixed were:我修复的错误是:
1) Use effect doen't expect a Promise as parameter 1) 使用效果不要期望 Promise 作为参数
2) Every child must have their unique key. 2)每个孩子都必须有他们唯一的钥匙。
I had a exact same problem in react Router v5.我在 React Router v5 中遇到了完全相同的问题。 I think that there is a bug in version "react-router-dom": "^5.2.0".
我认为版本“react-router-dom”中存在错误:“^5.2.0”。
You only have to install newer version (v6) and than everything will work perfectly.您只需安装较新的版本 (v6),一切都会完美运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.