Yönlendirici V5 güncelleme URL'sine tepki verin, ancak sayfayı yenilemeyin
Aug 19 2020
tepki yönlendiricisi görünümü güncellemiyor ancak url'yi değiştiriyor.
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;
Ve bu benim 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;
Ne denedim:
- Router'da render ettiğim tüm bileşenleri Router ile dışa aktarmayı denedim. yine de sayfa yeniden yüklenmedi.
- Yönlendirici bileşenini üst düzey bir bileşen yapmayı denedim ama bu işe yaramadı.
- Li öğelerini bağlantı olarak yapmayı denedim, ancak bu istediğimi yapmadı.
- Bağlantı etiketlerinin üstüne bir anahtar eklemek ve anahtarı yönlendirici etiketinden çıkarmak gibi çözümleri denedim, ancak yine de hiçbir şey işe yaramadı.
- Rotaların sonunda evi yapmak için rotaların sırasını değiştirmeyi de denedim. Hala hiçbirşey.
Yanıtlar
MosiaThabo Aug 19 2020 at 16:50
Lütfen şu iki şeyi deneyin:
- Öncelikle Rotanızın sırasının aşağıdaki gibi olduğundan emin olun:
<Switch>
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
<Route exact path="/" component={Home} />
</Switch>
- Kaldır
<Router>
İçerideki<Nav>
iç ve şal her şeyi<App>
ile<Router>
... Bunun gibi:
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>
);
}
Bence tecrübelerime göre <Router>
sadece 1 çocuk beklediğimi fark ettim . yani senin durumunda <Router>
iki kez kullandın .
Ayrıca <Router>
, index.js dosyanıza ekleyerek bunu daha da basitleştirmek isteyebilirim :
ReactDOM.render(
<Router>
<App />
</Router>,
containerElement
);
Nicole Kidman, Michael Keaton ve Val Kilmer'in Batman Olarak Paylaştığı Bu 1 Çekici Özelliğe Bayıldı
Donovan, Şarkılarından 1'ini The Beatles'ın "Lucy in the Sky with Diamonds" şarkısıyla karşılaştırdı
Kevin Jonas'ın Kızı Alena, Doğum Günü Fotoğrafında Büyümüş Görünüyor: '9 Yaşında Gerçek Hissetmiyor'