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:

  1. Router'da render ettiğim tüm bileşenleri Router ile dışa aktarmayı denedim. yine de sayfa yeniden yüklenmedi.
  2. Yönlendirici bileşenini üst düzey bir bileşen yapmayı denedim ama bu işe yaramadı.
  3. Li öğelerini bağlantı olarak yapmayı denedim, ancak bu istediğimi yapmadı.
  4. 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ı.
  5. 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
);