Tyler McGinnis Blocked Desbloquear Seguir Seguindo 2 de janeiro
Muitas vezes, ao criar um aplicativo com o React Router, você precisará passar os acessórios através de um componente Link para a nova rota. Neste post, vamos detalhar como esse processo funciona.
Existem duas maneiras diferentes de passar dados de um componente Link até a nova rota que está sendo renderizada. O primeiro é através dos parâmetros de URL e o segundo é através do state .
Primeiro, vamos dar uma olhada nos parâmetros de URL. Se você leu nossa postagem Parâmetros de URL , você estará familiarizado com este exemplo. Digamos que fomos encarregados de construir a Route que processa a página de perfil do Twitter. Se criado com o React Router, essa rota pode ser semelhante a esta
<Route path='/:handle' component={Profile} />
Observe que o handle será dinâmico. Poderia ser qualquer coisa de tylermcginnis ou dan_abramov para realDonaldTrump .
Então, em nosso aplicativo, podemos ter um componente Link que se parece com isso
<Link to='/tylermcginnis'>Tyler McGinnis</Link>
Se clicado, o usuário seria levado para /tylermcginnis e o componente Profile poderia acessar o handle dinâmico ( tylermcginnis ) de props.match.params.handle .
o perfil da classe estende React.Component {
state = {
usuário: null
}
componentDidMount () {
const {handle} = this.props.match.params
fetch (` https://api.twitter.com/user/$ {handle}` )
.then ((usuário) => {
this.setState (() => ({user}))
})
}
render () {
...
}
}
Os parâmetros de URL são ótimos, mas não servem para servir como uma forma de obter dados de uma rota para outra, pois eles são limitados a apenas strings. E se em vez de apenas uma string, quiséssemos passar algo um pouco mais complexo, como um objeto ou uma matriz? Não haveria como fazer isso com os parâmetros de URL. Isso nos leva à segunda maneira de passar dados de uma rota para outra e isso é com o state .
Voltando ao nosso exemplo anterior, e se quiséssemos repassá-lo se o usuário estivesse vindo de uma determinada rota para o componente Profile quando o usuário clicasse no Link ? O React Router nos dá uma maneira de fazer isso e a API se parece com isso
<Link para = {{
nome do caminho: '/ tylermcginnis',
Estado: {
fromNotifications: true
}
}}> Tyler McGinnis </ Link>
Agora, o componente que está sendo renderizado para essa rota (nesse caso, Profile ) poderá acessar fromNotifications acessando props.location.state .
o perfil da classe estende React.Component {
state = {
usuário: null
}
componentDidMount () {
const {handle} = this.props.match.params
const {fromNotifications} = this.props.location.state
fetch (` https://api.twitter.com/user/$ {handle}` )
.then ((usuário) => {
this.setState (() => ({user}))
})
}
render () {
...
}
}
Para recapitular, existem duas maneiras de transmitir dados de um Link até a nova rota: parâmetros de URL e state . Os parâmetros de URL são ótimos para strings, mas depois são divididos. Ao criar os Link s to sustentar um objeto, você pode passar qualquer tipo de dado que precisar sob a propriedade state e que os dados podem ser acessados na nova rota em props.location.state .