Cuando trato de navegar de un componente a otra página usando rutas y necesito pasar algunos parámetros con él. Intenté proporcionarlos como estado usando history.push (...) como se ve a continuación, pero no funciona, tanto el estado como los accesorios están vacíos.
En el componente titular, Holder.js
Hasta arriba:
import history from '../routes/history';En la función de renderizado
<Button variant="contained" onClick={() => { history.push('/share', { account: this.props.account, credential: JSON.stringify(this.state.credentialInfo)}); window.location.reload();}} fullWidth sx={{mt: 3, mb: 2}}>Share ID</Button>En index.js
ReactDOM.render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/share" element={<SharePage />} /> </Routes> </BrowserRouter>, document.getElementById('root') );En historia.js
import { createBrowserHistory as history} from 'history'; export default history();Parece que está utilizando la versión 6 react-router-dom . En RRDv6, la navegación imperativa se logra a través de una función de navigate devuelta desde el enlace useNavigate . El problema es que el componente RRDv6 BrowserRouter instancia y mantiene su propio estado y objeto de history interno. Puede crear uno propio, pero dado que es un contexto de historial separado, no funcionará con su enrutador, enrutamiento y navegación.
declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any } ): void; (delta: number): void; }
Importe el useNavigate y acceda a la función de navigate , enviando el estado junto con la transición de la ruta. El estado de la ruta es parte del objeto de opciones como el segundo parámetro de la función de navigate .
Sin embargo, esto solo se usa válidamente en componentes de función, y el componente que usa el botón parece ser un componente de clase. Puede convertir el componente de clase en un componente de función o crear su propio componente de orden superior de withNavigation personalizado para que la función de navigate se pueda inyectar como accesorios.
import { useNavigate } from 'react-router-dom'; const withNavigation = Component => props => { const navigate = useNavigate(); return <Component {...props} navigate={navigate} />; }; export default withNavigation; Importe el nuevo HOC y decore su componente de clase, accediendo a la función de navigate desde accesorios.
import withNavigation from '../withNavigation'; ... <Button variant="contained" onClick={() => { this.props.navigate( '/share', { state: { account: this.props.account, credential: JSON.stringify(this.state.credentialInfo), } }, ); }} fullWidth sx={{ mt: 3, mb: 2 }} > Share ID </Button> ... export default withNavigation(MyClassComponent); Se accede al estado de la ruta de la misma manera en v6 que en v5, salvo que el objeto de location es un accesorio. Use el enlace useLocation para acceder al objeto de location y su propiedad state .
const { state } = useLocation(); ... const { account, credential } = state || {}; Si SharePage es otro componente de clase, puede expandir su HOC withNavigation para incluir otros ganchos RRD e inyectar otros accesorios.
No. Solo puedes:
import { useHistory } from 'react-router-dom'; function YourComponent() { const history = useHistory(); const share = useCallback(() => { history.push(`/share?account=${this.props.account}&credential=${JSON.stringify(this.state.credentialInfo)}`); }, []); return ( <Button variant="contained" onClick={share}>Share ID</Button> ) } `