• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

134
Vistas
How to use Forwarding Refs with react-router-dom

I already understand the concept of Forwarding Refs and react-router-dom. But in this implementation, I'm not sure how to use it correctly. I have a child component, where there is a function that set null in a useState. I want this function to be executed every time I click on the menu item that renders this child component. This menu is mounted in the com List and the Router in the App, as shown in the 3 files below. Precisely, I don't know where to put the useRef to execute the child function resetMyState, if it's in App.js or or AppBarAndDrawer.js and how to do it.

childComponent.js

...
const MeusAnuncios = forwardRef((props, ref) => {

  const [myState, setMyState] = useState(null);
   
  function resetMyState(){
     setMyState(null)
  }
  async function chargeMyState() {
      await
      ...
         setMyState(values)
      ...
   }
...

AppBarAndDrawer.js

...
const drawer = (
    <div>
      <div className={classes.toolbar} />
      <Divider />
      <List>
        {[
          { label: "Minha Conta", text: "minhaConta", icon: "person" },
          { label: "Novo Anúncio", text: "novoAnuncio", icon: "queue_play_next" },
          { label: "Meus Anúncios", text: "meusAnuncios", icon: "dvr" },
          { label: "Estatísticas", text: "estatisticas", icon: "line_style" },
          { label: "Faturamento", text: "faturamento", icon: "local_atm" },
          { label: "childComponent", text: "childComponent", icon: "notifications" },
        ].map(({ label, text, icon }, index) => (
          <ListItem
            component={RouterLink}
            selected={pathname === `/${text}`}
            to={`/${text}`}
            button
            key={text}
            disabled={text !=='minhaConta' && !cadCompleto ? true : false}
            onClick={() => {click(text) }}            
          >
            <ListItemIcon>
              <Icon>{icon}</Icon>
            </ListItemIcon>
            <ListItemText primary={label.toUpperCase()} />
          </ListItem>
        ))}
      </List>
      <Divider />
    </div>
  );

return(
...
   {drawer}
...
)
...

App.js

...
export default function App() {

  const childRef = useRef();
  ...
  <Router>           
    <AppBarAndDrawer/>
    <Switch>
      <Route path="/childComponent">
        <childComponent />
      </Route>
  ...
...
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The ref you create does need to reside in a common ancestor, i.e. App, so it and a callback can be passed on to children components. The ref to ChildComponent and the callback to the AppBarAndDrawer. Additionally, the ChildComponent will need to use the useImperativeHandle hook to expose out the child's resetMyState handler.

MeusAnuncios

Use the useImperativeHandle hook to expose out the resetMyState handler.

const MeusAnuncios = forwardRef((props, ref) => {
  const [myState, setMyState] = useState(null);
   
  function resetMyState(){
    setMyState(null);
  }

  useImperativeHandle(ref, () => ({
    resetMyState,
  }));

  async function chargeMyState() {
    await
    ...
    setMyState(values)
    ...
  }

  ...
});

App

Create a resetChildState callback and pass the ref to the child component and callback to the AppBarAndDrawer component.

export default function App() {
  const childRef = useRef();

  const resetChildState = () => {
    if (childRef.current.resetMyState) {
      childRef.current.resetMyState();
    }
  };

  ...

  <Router>           
    <AppBarAndDrawer onClick={resetChildState} /> // <-- pass callback
    <Switch>
      <Route path="/childComponent">
        <ChildComponent ref={childRef} /> // <-- pass ref
      </Route>
      ...
    </Switch>
    ...
  </Router>
}

AppBarAndDrawer

Consume and call the passed callback.

const AppBarAndDrawer = ({ onClick }) => { // <-- destructure callback
  ...

  const drawer = (
    <div>
      ...
      <List>
        {[
          ...
        ].map(({ label, text, icon }, index) => (
          <ListItem
            component={RouterLink}
            selected={pathname === `/${text}`}
            to={`/${text}`}
            button
            key={text}
            disabled={text !=='minhaConta' && !cadCompleto}
            onClick={() => {
              click(text);
              onClick(); // <-- call callback here
            }}            
          >
            <ListItemIcon>
              <Icon>{icon}</Icon>
            </ListItemIcon>
            <ListItemText primary={label.toUpperCase()} />
          </ListItem>
        ))}
      </List>
      ...
    </div>
  );

  ...
};
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda