0
149
ViewsEstoy trabajando con React Route, y tengo una cadena aleatoria, pero cuando hago clic en la página del enlace funciona, pero cuando hago clic nuevamente no funciona
Tengo un menú simple y tengo una página con un contexto aleatorio solo para pruebas. Aquí mi index.js
const Route = ReactRouterDOM.Route; const Link = ReactRouterDOM.Link; const HashRouter = ReactRouterDOM.HashRouter; const Routes = ReactRouterDOM.Routes; // create context const UserContext = React.createContext(null); function Spa() { return ( <HashRouter> <div> <h1>Routing - Hello World</h1> <Link to="/">Home</Link> -- <Link to="/about/">About</Link> -- <Link to="/products">Products</Link> <hr /> <UserContext.Provider value={{ users: ["peter"] }}> <Routes> <Route path="/" exact element={ <Home />} /> <Route path="/about/" element={ <About />} /> <Route path="/products/" element={ <Products />} /> </Routes> </UserContext.Provider> </div> </HashRouter> ); } ReactDOM.render( <Spa/>, document.getElementById('root') );y este es mi productos.js
const ctx = React.useContext(UserContext); ctx.users.push(Math.random().toString(36).substr(2, 5)); return ( <div> <h3>Products Component</h3> <p>List of the the product we make</p> {JSON.stringify(ctx.users)} </div> ); }mi problema es que cuando hago clic en el menú de productos por primera vez, el azar funciona, pero si lo hago de nuevo no funciona, tengo que cambiar el enlace, por ejemplo, iniciar sesión y volver a los productos para trabajos aleatorios.
Alguien sabe cual puede ser el problema?
Estoy usando React-dom-16.8 Historia-5 React-Router-dom-6
·
Santiago Gelvez
2 answers
Answer question0
Problemas
- Vincularse a una ruta con la misma ruta y estado/etc. es efectivamente una operación no operativa. No activará una navegación y no activará la representación del componente enrutado.
-
ctx.users.push(Math.random().toString(36).substr(2, 5));es un efecto secundario no intencional y tampoco activará una nueva representación. Solo ve la mutación después de navegar y regresar a"/products".
Solución
-
usersdeben residir en algún estado de reacción para que cuando se actualice pueda activar los componentes de React para que se vuelvan a procesar. Pase el estado de losusersy el actualizador de estado ( o alguna devolución de llamada para actualizar el estado ) como el valor deUserContext. - Pase algún valor de estado "aleatorio" en el enlace para que active la acción de navegación. Verifique el estado en un
useEffectpara ayudar a activar el efecto para actualizar el estado de losusers.
Sugerencias
Spa
const Spa = () => { const [users, setUsers] = useState(["peter"]); return ( <Router> <div> <h1>Routing - Hello World</h1> <Link to="/">Home</Link> -- <Link to="/about/">About</Link> -- <Link to="/products" state={{ value: Math.random() }} // <-- random state to trigger navigation > Products </Link> <hr /> <UserContext.Provider value={{ users, setUsers }}> <Routes> <Route path="/" exact element={<Home />} /> <Route path="/about/" element={<About />} /> <Route path="/products/" element={<Products />} /> </Routes> </UserContext.Provider> </div> </Router> ); };productos
const Products = () => { const { state } = useLocation(); const { users, setUsers } = useContext(UserContext); // "Listen" for updates to route state to trigger effect useEffect(() => { setUsers((users) => [...users, Math.random().toString(36).substr(2, 5)]); }, [state, setUsers]); return ( <div> <h3>Products Component</h3> <p>List of the the product we make</p> {JSON.stringify(users)} </div> ); }; 
·
Santiago Gelvez
Report
0
Use BrowserRouter en lugar de HashRouter
·
Santiago Gelvez
Report
Answer question