En primer lugar, uso react-router-dom v6 en mi proyecto. Como sabéis, dispone del Outlet que facilita la gestión de rutas. El siguiente ejemplo funciona perfectamente.
Esta es la ruta principal. diseño.js
export default function Layout() { const [darkMode, setDarkMode] = useState(false); return ( /* Header*/ /* Content*/ <Outlet context={[darkMode, setDarkMode]} /> /* footer*/ ) }Esta es la ruta del niño. iniciar sesión.js
export default function Login() { const [darkMode, setDarkMode] = useOutletContext(); return ( /*Some Codes*/ ) }Cuando quiero enviar múltiples accesorios con contexto, no funciona.
Como esto:
export default function Layout() { const [darkMode, setDarkMode] = useState(false); const [color, setColor] = useState("#fff"); return ( /* Header*/ /* Content*/ <Outlet context={{ darkMode: [darkMode, setDarkMode], color: [color, setColor] }} /> /* footer*/ ) } export default function Login() { const [darkMode, setDarkMode] = useOutletContext(); const [color, setColor] = useOutletContext(); return ( /*Some Codes*/ ) }¿Cómo puedo enviar múltiples accesorios con Outlet Context? ¿Es posible?
En el primer ejemplo de código, el valor de contexto de Outlet es [darkMode, setDarkMode] , y el código usa correctamente la asignación de desestructuración de matrices para acceder a darkMode y setDarkMode .
<Outlet context={[darkMode, setDarkMode]} />...
const [darkMode, setDarkMode] = useOutletContext(); Ahora, en el segundo ejemplo, Outlet proporciona un valor de contexto de una forma diferente, { darkMode: [darkMode, setDarkMode], color: [color, setColor] } . En cambio, ahora es un objeto con darkMode y propiedades de color . Los consumidores de contexto de salida ahora deben usar la asignación de desestructuración de objetos para acceder a los valores.
<Outlet context={{ darkMode: [darkMode, setDarkMode], color: [color, setColor], }} />...
const { darkMode, color } = useOutletContext(); // darkmode -> [darkMode, setDarkMode] // color -> [color, setColor] darkMode.darkMode darkMode.setDarkMode ... etc...Puede combinar la desestructuración de objetos con el cambio de nombre de variables y la asignación de desestructuración de matrices también.
const { darkMode: [darkMode, setDarkMode], color: [color, setColor], } = useOutletContext();Creo que está pasando tanto el color como el setcolor, eso es incorrecto a través de los accesorios, solo podemos pasar solo los datos que están en nuestro color, así que intente pasar solo el color, no setColor y también si todavía hay problemas, elimine su matriz también.