React routeur V5 mettant à jour l'URL mais pas actualisant la page

Question

le routeur de réaction ne met pas à jour la vue mais modifie l'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;

Et voici mon 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;

Ce que j'ai essayé :

1. J'ai essayé d'exporter tous les composants que je rends à l'intérieur d'un routeur avec withRouter. la page ne s'est toujours pas rechargée.
2. J'ai essayé de faire du composant routeur un composant de niveau supérieur, mais cela n'a pas fonctionné.
3. J'ai essayé de faire des éléments li sous forme de liens, mais cela n'a pas fait ce que je voulais.
4. J'ai essayé des solutions telles que l'inclusion d'un commutateur au-dessus des balises de lien et la suppression du commutateur de la balise du routeur, mais rien n'a fonctionné.
5. J'ai également essayé de changer l'ordre des routes pour faire la maison à la fin des routes. Toujours rien.

Answer 1

Veuillez essayer ces deux choses :

• Assurez-vous d'abord que l'ordre de votre Route est le suivant :

<Switch>
  <Route path="/about" component={About} />
  <Route path="/career" component={Career} />
  <Route path="/notfound" component={notFoundPage} />
  <Route exact path="/" component={Home} />
</Switch>

• Retirez <Router>l'intérieur de votre <Nav>et enveloppez tout à l'intérieur <App>avec <Router>... Comme ceci :

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>
  );
}

Je pense qu'il vaut la peine de noter que d'après mon expérience, j'ai réalisé qu'il <Router>n'attend qu'un seul enfant. donc dans votre cas vous avez utilisé <Router>deux fois.

---

Je pourrais aussi vouloir le simplifier davantage en mettant votre <Router>fichier in index.js :

ReactDOM.render(
   <Router>
      <App />
   </Router>,
   containerElement
);