ตอบสนองเราเตอร์ V5 ที่อัปเดต URL แต่ไม่รีเฟรชหน้า
Aug 19 2020
เราเตอร์ตอบสนองไม่ได้อัปเดตมุมมอง แต่เปลี่ยน URL
Navbar.js:
import React from "react";
import logo from "../Assets/imgs/Logo/WHITELOGOkatman 1.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
class Navbar extends React.Component {
render() {
return (
<div className="header">
<img className="logo" src={logo} alt="logo" />
<Router>
<nav>
<ul className="nav_links">
<Link to="/">
<li>Home</li>
</Link>
<Link to="/process">
<li>Process</li>
</Link>
<Link to="/career">
<li>Career</li>
</Link>
<Link to="/about">
<li>About</li>
</Link>
</ul>
</nav>
</Router>
</div>
);
}
}
export default Navbar;
และนี่คือ App.js ของฉัน
import React from "react";
import "./App.css";
import "./Components/Styles/style.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./Components/Navbar";
import About from "./Components/About";
import Home from "./Components/Home";
import Career from "./Components/Career";
import Footer from "./Components/Footer";
import notFoundPage from "./Components/404";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Navbar />
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
</Switch>
</Router>
<Footer />
</div>
);
}
export default App;
สิ่งที่ฉันได้ลอง:
- ฉันได้ลองส่งออกส่วนประกอบทั้งหมดที่ฉันแสดงภายในเราเตอร์ด้วย withRouter หน้ายังไม่โหลดซ้ำ
- ฉันได้พยายามทำให้ส่วนประกอบของเราเตอร์เป็นส่วนประกอบระดับบนสุด แต่ไม่ได้ผล
- ฉันได้ลองสร้างรายการ li เป็นลิงก์แล้ว แต่ไม่ได้ทำตามที่ฉันต้องการ
- ฉันได้ลองใช้วิธีแก้ปัญหาเช่นรวมสวิตช์ที่ด้านบนของแท็กลิงก์และลบสวิตช์ออกจากแท็กเราเตอร์ แต่ก็ยังไม่ได้ผล
- ฉันยังได้ลองสลับลำดับของเส้นทางเพื่อทำให้บ้านอยู่ท้ายสุดของเส้นทาง ยังคงไม่มีอะไร.
คำตอบ
MosiaThabo Aug 19 2020 at 16:50
โปรดลองสองสิ่งนี้:
- ขั้นแรกให้แน่ใจว่าลำดับเส้นทางของคุณเป็นดังนี้:
<Switch>
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
<Route exact path="/" component={Home} />
</Switch>
- ถอด
<Router>
ภายในของคุณ<Nav>
และห่อทุกอย่างไว้ด้านใน<App>
ด้วย<Router>
... เช่นนี้:
function App() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
</Switch>
<Footer />
</div>
</Router>
);
}
ฉันคิดว่ามันน่าสังเกตว่าจากประสบการณ์ของฉันฉันได้ตระหนักว่า<Router>
คาดหวังว่าจะมีลูกเพียง 1 คน ดังนั้นในกรณีของคุณคุณใช้<Router>
สองครั้ง
ฉันอาจต้องการทำให้มันง่ายขึ้นโดยใส่<Router>
ไฟล์ index.js ของคุณ:
ReactDOM.render(
<Router>
<App />
</Router>,
containerElement
);