javascript - Problème avec les sous-composants imbriqués dans React-Router pour obtenir des objets de localisation

Question

Par exemple, une page a un composant modal. Le contenu du composant modal est écrit dans le sous-composant (ModalDetail) ne peut pas être obtenu dans ce composant. à partir du composant parent et via l'objet fenêtre. Prenez-le, existe-t-il un autre moyen

Answer 1

Les versions antérieures à

react-router v4 avaient un composant d'ordre supérieur appelé withRouter. Il vous suffit d'envelopper un calque lors de la définition de votre propre composant modal.

La version v4 n'a pas été utilisée pour le moment, et on ne sait pas s'il y a eu des changements

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <p>You are now at {location.pathname}</p>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export default withRouter(ShowTheLocation)

Après avoir enveloppé une couche de withRouter, vous pouvez accéder aux attributs souhaités. Vous pouvez également étudier plus en détail pour voir ce qu'il y a à l'intérieur.

Answer 2

Vous pouvez également utiliser withRouter et l'obtenir via this.props.location

import React, { Component } from 'react';
import { withRouter } from 'react-router'


class  MyComponent extends Component {

   .....
}

export default withRouter(MyComponent)