React router V5 aggiorna l'URL ma non aggiorna la pagina

Question

il router react non sta aggiornando la vista ma cambia 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;

E questa è la mia 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;

Cosa ho provato:

1. Ho provato a esportare tutti i componenti che sto eseguendo il rendering all'interno di un router con withRouter. ancora la pagina non è stata ricaricata.
2. Ho provato a rendere il componente del router un componente di livello superiore ma non ha funzionato.
3. Ho provato a creare gli elementi li come collegamenti, ma non ha fatto quello che volevo.
4. Ho provato soluzioni come includere un interruttore sopra i tag di collegamento e rimuovere l'interruttore dal tag del router, ma ancora niente ha funzionato.
5. Ho anche provato a cambiare l'ordine dei percorsi per raggiungere la casa alla fine dei percorsi. Ancora niente.

Answer 1

Si prega di provare queste due cose:

• Innanzitutto assicurati che l'ordine del tuo percorso sia il seguente:

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

• Rimuovi <Router>dentro il tuo <Nav>e avvolgi tutto dentro <App>con <Router>... In questo modo:

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

Penso che valga la pena notare che nella mia esperienza mi sono reso conto che <Router>si aspetta solo 1 bambino. quindi nel tuo caso hai usato <Router>due volte.

---

Potrei anche voler semplificarlo ulteriormente inserendo il tuo <Router>file index.js:

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