Problema
Tengo dos React Router que apuntan al mismo componente, pero se pasan dos accesorios diferentes. React Router no parece volver a procesar el componente, por lo que no se muestran los cambios
Aplicación.js
function App() { return ( <Router> <div className="App"> <Switch> <Route path="/" exact component={Main}/> <Route path="/FAQ" component={Faq}/> </Switch> </div> </Router> ); }Encabezamiento
<Link to="/" ><li className="active">HOME</li></Link> <Link to={{ pathname: '/FAQ', state: { Display: "about"} }} ><li>ABOUT</li></Link> <Link to={{ pathname: '/FAQ', state: { Display: ""} }} ><li>FAQ</li></Link>Preguntas frecuentes.js
<Accordion className="accordion" preExpanded={[props.location.state.Display]} >El sitio funciona como se espera si, por ejemplo, voy a Inicio > Acerca de, o Inicio > Preguntas frecuentes, pero en caso de que vaya a Preguntas frecuentes > Acerca de o Acerca de > Preguntas frecuentes, el sitio no vuelve a mostrarse y el "acordeón" no se gasta previamente ni siquiera aunque los accesorios se cambian en FAQ.js porque los registré en la consola.
Según su código, el componente no se volverá a renderizar ya que no cambia el estado que desencadena cualquier evento de renderizado para el ciclo de vida de reacción ...
Entonces, prefiero cambiar su código de estado de ubicación a parámetro de URL, ya que según su lógica aquí, esto es lo que necesitaba, por ejemplo:
<Switch> <Route path="/" exact component={Main}/> <Route path="/FAQ/:slug?" component={Faq}/> </Switch>y en su Componente Faq:
let { slug } = useParams();ahora, al hacer clic en Enlace:
<Link to="/Faq/about" ><li className="...">About</li></Link>o
<Link to="/Faq" ><li className="...">Faq</li></Link>se activará la re-renderización, ya que el suyo es un estado cambiado...
Nota: :slug? agregamos un signo de interrogación aquí para que sea opcional... para que pueda enviar o no.
Nota 2: si necesita volver a renderizar la base en el estado, simplemente puede agregar gancho y lesión a location.state y activar la actualización manualmente en useState o mediante cualquier acción que desee ... como agregar accesorios clave que contengan location.state Valor de .myKey