Я хотел бы, чтобы при нажатии на NavLink обновить страницу маршрутизатора, а не просто изменить ее, мои страницы содержат внешние плагины JS, которые не загружаются только при изменении страницы, необходимо перезагрузить. Мой код:

import React from "react";
import Home from './components/pages/Home';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Teste from './components/pages/Teste';
import Footer from './components/Footer';
import { Fragment } from "react";
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

export default function App() {
  return (
    <div>
      <Fragment>
        <div className="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
          <Header />
          <div className="app-main">
            <Router>
              <Sidebar />
              <div className="app-main__outer">
                <Switch>
                  <Route path="/home">
                    <Home />
                  </Route>
                  <Route path="/page/teste">
                    <Teste />
                  </Route>
                </Switch>
                <Footer />
              </div>
            </Router>
          </div>
        </div>
      </Fragment>
    </div>
  );
}

NavLinks находится в компоненте SideBar, поэтому его там не видно, моя «Домашняя» страница содержит плагин JS, который при переходе с «Тестовой» страницы не загружается, только когда я обновляю всю страницу. Спасибо.

2
Harrison Martes 20 Сен 2022 в 22:05
Что вы подразумеваете под «обновить страницу маршрутизатора, а не просто изменить ее»?
 – 
Drew Reese
20 Сен 2022 в 22:09

2 ответа

Вы можете обновить BrowserRouter, используя свойство forceRefresh BrowserRouter:

          <Router forceRefresh>
              <Sidebar />
              <div className="app-main__outer">
                <Switch>
                  <Route path="/home">
                    <Home />
                  </Route>
                  <Route path="/page/teste">
                    <Teste />
                  </Route>
                </Switch>
                <Footer />
              </div>
            </Router>
1
debugger 20 Сен 2022 в 22:11
Могу ли я обновить только компонент? Вместо всей страницы?
 – 
Harrison Martes
20 Сен 2022 в 22:18
Я думаю, вам нужно обновить состояние компонента для этого
 – 
debugger
20 Сен 2022 в 22:21
Вот статья, на которую вы можете подписаться: Принудительный повторный рендеринг компонента React
 – 
debugger
20 Сен 2022 в 22:22

Вы можете принудительно перезагрузить страницу с помощью реквизита forceRefresh на BrowserRouter.

принудительное обновление

Если true, маршрутизатор будет использовать полное обновление страницы при навигации по страницам. Вы можете использовать это, чтобы имитировать работу традиционного серверного приложения с полным обновлением страницы между навигацией по страницам.

<Router forceRefresh>
  <Sidebar />
  <div className="app-main__outer">
    <Switch>
      <Route path="/home">
        <Home />
      </Route>
      <Route path="/page/teste">
        <Teste />
      </Route>
    </Switch>
    <Footer />
  </div>
</Router>

Если/когда вы когда-нибудь обновитесь до react-router-dom@6, это будет сделано аналогичным образом с помощью свойства reloadDocument компонента Link|NavLink.

Ссылка RRDv6

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;
  reloadDocument?: boolean; // <--
}
1
Drew Reese 20 Сен 2022 в 22:12
Могу ли я обновить только компонент? Вместо всей страницы?
 – 
Harrison Martes
20 Сен 2022 в 22:18
Возможно, но для того, чтобы предоставить более подходящее/целевое/ограниченное решение, нам нужно увидеть реализацию этого компонента Home, что он отображает и для чего именно вам нужно перезагрузить страницу/веб-приложение. Что за js-плагин?
 – 
Drew Reese
20 Сен 2022 в 22:20