javascript - Obtenga parámetros de ruta en react-router v4

reactjs

Question

Estoy tratando de construir un enlace de enrutador a través de mi aplicación,

En este escenario, tengo tres archivos.

App.js

Book.js

DetailedView.js

Dentro del Libro he creado un <Link> que solo aparece cuando está suspendido (sobre la cubierta de un libro)

{this.state.isHovered ? (
   <Link to={`/details/${this.props.book.industryIdentifiers[1].identifier}`}>
<div className="hover-box"></div>
</Link>) : ( <div /> )}

Esto me llevará a / detalles / 12345 (número isbn10)

Lo que me cuesta entender es cómo, por ejemplo, establecer setState({iPressedThisBook}) al presionar <Link> o si puedo usar la parte después de /12345 para crear como un filtro

Porque en la App la Route se conectará como ...

<Route path="/details/:id" render={() => (
          <BookDetailedView
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}
          />
)}/>

Más adelante, quiero tomar el :id para hacer, por ejemplo, un this.props.book.find(:id) dentro de mi <BookDetailedView>

Answer 1

Para recibir el parámetro de ruta en su componente, primero debe conectar su componente con withRouter HOC desde react-router para que pueda acceder a los accesorios del enrutador y obtener los params ruta de los accesorios de match como this.props.match.params.id

Código de muestra:

import {withRouter} from ''react-router'';

class BookDetailedView extends React.Component {
    render() {
        var id = this.props.match.params.id


    }
}
export default withRouter(BookDetailedView) ;

o simplemente pasarlo con render prop en ruta como

<Route path="/details/:id" render={({match}) => (
          <BookDetailedView
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}
            id={match.params.id}
          />
)}/>

De la documentación de reacción del match

partido

Un objeto de coincidencia contiene información sobre cómo una <Route path> coincide con la URL. match objetos de match contienen las siguientes propiedades:

• params - (objeto) Pares clave / valor analizados desde la URL correspondiente a los segmentos dinámicos de la ruta
• isExact: (booleano) verdadero si se coincidió con la URL completa (sin caracteres finales)
• ruta - (cadena) El patrón de ruta utilizado para coincidir. Útil para construir s anidados
• url - (cadena) La parte coincidente de la URL. Útil para construir s anidados

Tendrás acceso a objetos de coincidencia en varios lugares:

1. Componente de ruta como this.props.match
2. Ruta renderizada como ({match}) => ()
3. Enrutar hijos como ({match}) => ()
4. withRouter como this.props.match
5. matchPath como el valor de retorno

Si una ruta no tiene una ruta y, por lo tanto, siempre coincide, obtendrá la coincidencia principal más cercana. Lo mismo ocurre con Router

Answer 2

Puede acceder a: id haciendo esto.props.params.id

puede manejar el enrutamiento de muchas maneras, no tiene que hacerlo, también puede manejarlo en una función.

function doSomethingWhenClicked(id)
{
      doSomething();
      this.props.history.push({
        pathname: ''/example/''+id
      });   
      
 }

y enlazar esta función en un elemento onclick