Reaccionar enrutador V5 actualizando URL pero no actualizando página

Question

El enrutador de reacción no está actualizando la vista, pero cambia la 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;

Y esta es mi 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;

Lo que he probado:

1. Intenté exportar todos los componentes que estoy renderizando dentro de un enrutador con withRouter. todavia la pagina no se recargo.
2. He intentado hacer que el componente del enrutador sea un componente de nivel superior, pero eso no funcionó.
3. Intenté hacer los elementos li como enlaces, pero eso no hizo lo que quería.
4. Probé soluciones como incluir un interruptor en la parte superior de las etiquetas de enlace y quitar el interruptor de la etiqueta del enrutador, pero nada funcionó.
5. También he intentado cambiar el orden de las rutas para hacer el hogar al final de las rutas. Aún nada.

Answer 1

Por favor, intente estas dos cosas:

• Primero asegúrese de que el orden de su Ruta sea el siguiente:

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

• Retire <Router>dentro de su <Nav>y envuelva todo dentro <App>con <Router>... Así:

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

Creo que vale la pena señalar que en mi experiencia me he dado cuenta de que <Router>espera solo 1 hijo. entonces en tu caso usaste <Router>dos veces.

---

También podría querer simplificarlo aún más poniendo su <Router>archivo index.js:

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