Estoy usando react-router-dom V6, con varios componentes de clase diferentes que están conectados con varios anidados dentro de cada componente. En App.js, he definido el enrutador y las rutas de mi navegador de la siguiente manera:
// import omitted for simplicity function App() { return ( <BrowserRouter> <NAVBAR /> <Routes> <Route path="/" element={ <SHOW_OPTIONS />} /> <Route path="/view_list/:list_id" element={ <SHOW_LIST />} /> <Route path="/authorize" element={ <AUTHORIZE_ITEM /> } /> </Routes> </BrowserRouter> ); } export default App;Dentro de SHOW_OPTIONS, tengo una opción que te lleva a /view_list/:list_id. Dentro de SHOW_OPTIONS, necesito sacar el list_id del parámetro y luego consultar una base de datos para todo con ese list_id, luego mostrar la lista para que el usuario final la explore.
Donde me encuentro con problemas es sacar ese parámetro de consulta de la URL en mi componente de clase, ya que no puedo usar ningún enlace directamente desde la clase.
Así es como se ve mi clase SHOW_LIST:
export class SHOW_LIST extends Component { constructor(props) { super(props); // Here I want to be able to assign my query // param to this.state.list_id this.state = { list_id: '', items: '', items_selected: '' } } componentDidMount() { getListData(this.state.list_id) // this is == '' right now should be .then(res => res.json()) // what was passed .then(data => { console.log(data); this.setState({items: data}); }) .catch(err => { console.log(err); }); } buildList() { // where the list is actually // built using this.state.items return ( <div>I made it through!</div> ) } render () { if(this.state.items != null) { return ( {this.buildList()} ); } else { return ( <div id="loading"> Loading... </div> ); } } }Mi enlace al componente SHOW_LIST se ve así:
<Link to = {{pathname: '/view_list/'+list_id}}></Link>Mi solución inicial fue hacer algo como lo que se está haciendo aquí, pero como necesito acceder a los parámetros de consulta dentro de mi componente de clase, no estoy seguro de que esta resolución funcione. ¿Cómo pasar parámetros al enlace usando React router v6?
Una vez que haya seguido las instrucciones de la respuesta vinculada y haya creado un withRouter personalizado con el enrutador para inyectar los parámetros de la ruta de ruta, acceda a ellos a través del objeto props .
Dado withRouter HOC:
const withRouter = WrappedComponent => props => { const params = useParams(); // <-- these are the path params // etc... other react-router-dom v6 hooks return ( <WrappedComponent {...props} params={params} // etc... /> ); };Y ruta de ruta:
path="/view_list/:list_id" Decore el componente y acceda a él a través this.props.params.list_id . No almacene list_id prop en estado ya que esto es en realidad un anti-patrón en React ( almacenando accesorios pasados en estado local ).
export class SHOW_LIST extends Component { constructor(props) { super(props); this.state = { items: null, items_selected: '' } } componentDidMount() { getListData(this.props.params.list_id) // <-- consume from props .then(res => res.json()) .then(data => { console.log(data); this.setState({items: data}); }) .catch(console.error); } buildList() { // where the list is actually // built using this.state.items return ( <div>I made it through!</div> ) } render () { if (this.state.items !== null) { return this.buildList(); } else { return ( <div id="loading"> Loading... </div> ); } } } Exporte el SHOW_LIST decorado:
export default withRouter(SHOW_LIST);