React router V5 обновляет URL, но не обновляет страницу

Aug 19 2020

маршрутизатор реакции не обновляет представление, но меняет 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;

А это мой 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;

Что я пробовал:

  1. Я попытался экспортировать все компоненты, которые я визуализирую, внутри маршрутизатора с помощью withRouter. по-прежнему страница не перезагружалась.
  2. Я попытался сделать компонент маршрутизатора компонентом верхнего уровня, но это не сработало.
  3. Я попытался сделать элементы li как ссылки, но это не помогло мне.
  4. Я пробовал такие решения, как включение переключателя поверх тегов ссылок и удаление переключателя из тегов маршрутизатора, но все равно ничего не работало.
  5. Я также попытался изменить порядок маршрутов, чтобы добраться до дома в конце маршрутов. Еще ничего.

Ответы

MosiaThabo Aug 19 2020 at 16:50

Пожалуйста, попробуйте эти две вещи:

  • Сначала убедитесь, что ваш Маршрут упорядочен следующим образом:
<Switch>
  <Route path="/about" component={About} />
  <Route path="/career" component={Career} />
  <Route path="/notfound" component={notFoundPage} />
  <Route exact path="/" component={Home} />
</Switch>
  • Удалить <Router>внутри <Nav>и завернуть все внутри <App>с <Router>... Как это:
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>
  );
}

Думаю, стоит отметить, что по своему опыту я пришла к выводу, что <Router>ожидает только 1 ребенка. поэтому в вашем случае вы использовали <Router>дважды.


Я также могу упростить его, поместив ваш <Router>файл в index.js:

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