Блог

Главная - Вопросы по программированию - Реагировать выполнять общий код при каждом изменении маршрута

Реагировать выполнять общий код при каждом изменении маршрута

#reactjs #react-hooks

Вопрос:

У меня есть компонент, включенный в мой App.js и этот компонент содержит некоторую общую логику, которую необходимо выполнить.

Итак, мой компонент приложения JSX выглядит так

 <CommonComponent />
    {canRenderBool amp;amp; (
    <div class="container">
        <Route exact path="/comp1">
        <Comp1 />
        </Route>
        <Route exact path="/comp2">
        <Comp2 />
        </Route>
        </div>
)
}

Теперь я хочу, чтобы при каждом переходе маршрута (например, пользователь нажимает на новый URL-адрес маршрута) запускался код в CommonComponent (не маршрутизируемый компонент).
Этот общий компонент имеет логику, которая возвращает логическую переменную, и я как бы визуализирую/не визуализирую Comp1/Comp2, т. е. все маршруты, основанные на этом логическом

Как лучше всего я могу с этим справиться? Я хочу избежать того, чтобы этот код определялся/вызывался в каждом компоненте вручную?

Кроме того, большинство моих компонентов основаны на функциях/крючках.

Комментарии:

1. Является ли CommonComponent родительским для comp1 и comp2? Я не вижу закрывающего тега.

2. О, извините…обновлено… Ни один общий компонент не является дочерним по отношению к приложению и своего рода родным братом comp1 и comp2

3. Также просто добавлю, что этот общий компонент имеет логику, которая возвращает логическую переменную, и я как бы визуализирую/не визуализирую Comp1/Comp2, т. е. все маршруты, основанные на этом логическом

4. Обновлен код, чтобы вы могли получить представление

5. На самом деле в моем случае это находится в приложении component…so ни одного родителя как такового… Не уверен, что это все еще сработает…

Ответ №1:

В случае, если вы используете функциональный компонент для своего App компонента. Вы можете написать свою CommonComponent логику внутри useEffect , а затем установить состояние для своего canRenderBool флага

например

 import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link, useLocation } from "react-router-dom";

function App() {
  const [canRenderBool , setCanRenderBool] = useState(false);
  const location = useLocation(); // this will only work if you wrap your App component in a Router

  // this effect will run on every route change
  useEffect(() => {
    // your logic here
    // ..

    // set value of 'canRenderBool' flag
    setCanRenderBool(true);
  }, [location]);

  return (
    // Note that Router is not used here it will be wraped when we export this component, see below
    <Switch>
      <Route exact path="/">
        <Page1 />
      </Route>

      {canRenderBool amp;amp; (
        <Route exact path="/page-2">
          <Page2 />
        </Route>
      )}
    </Switch>
  );
}

function Page1() {
  return (
    <div>
      <h1>
        Go to <Link to="/page-2">Page 2</Link>
      </h1>
    </div>
  );
}

function Page2() {
  return (
    <div>
      <h1>
        Go to <Link to="/">Page 1</Link>
      </h1>
    </div>
  );
}

// Wrapping Router around App and exporting
export default () => (
  <Router>
    <App />
  </Router>
);

Ответ №2:

 {canRenderBool amp;amp; (
 <Router>
  <div class="container">
      <Switch>
        <Route exact path="/comp1"> <Comp1 /> </Route>
        <Route exact path="/comp2"> <Comp2 /> </Route>
      </Switch>
    <Link to="/comp1">Component 1</Link>
    <Link to="/comp2">Component 2</Link>
  </div>
 </Router>
)
}

Это может помочь. И вам нужно будет импортировать все ключевые слова и компоненты, прежде чем использовать их.

Метки: