Отображение условного маршрута при отображении компонентов
У меня есть приложение, в котором я отображаю некоторые образцы пользовательских компонентов. Я добавляю некоторые реквизиты и хочу создать условную навигационную ссылку, которая отображает только простые компоненты профиля, отображающие имя.
До сих пор я сделал условную навигацию, ссылку внутри компонента, и реквизиты отправляются правильно, и он отображает абзац под моим пользовательским компонентом, но я хочу сделать его перенаправлением, поэтому он показывает только компонент профиля.
Есть ли способ показать только этот компонент. Я пробовал с переключателем, но понял, что он отображает только первый маршрут, поэтому все остальное все равно будет отображаться ...
render() {
let persons= this.state.persons.map((item, index) =>{
return(
<Router>
<User key = {index} name = {item.name} img = {item.img} id = {item.id} />
</Router>
)
})
//user component
render(){
console.info(this.props.name)
return(
<Switch>
<div >
<img src = {this.props.img} alt = "profile" style = {{float: 'left'}}>
</img>
<p style = {{textAlign: 'center'}}>{this.props.name}</p>
<p>It's here = {this.props.loggedInProp}</p>
<Route path = "/:username" exact component = { Profile} />
<NavLink to = {`/${this.props.name}`}>Click me</NavLink>
</div>
</Switch>
//Profile component
const Profile= ({match}) =>{
return(
<div>
<p>Hello {match.params.username}</p>
</div>
)
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
<Route
exact
path = "/profile/view/:username"
render = {props => <ProfileView {...props} />}
/>
внутри компонента ProfileView вы можете затем использовать this.props.match.params.username для фильтрации вашей коллекции данных и отображения только ее деталей.
Компонент ProfileView
import React, { Component } from 'react';
export class ProfileView extends Component {
constructor(){
super()
this.state = {
allUsers[{ user1 ... }, {user2 ...}, ...],
selectedUser: {}
}
}
componentDidMount(){
// fetch('/get/users/from/somewhere').then(users => {
// this.setState({allUsers: users}) // Usually you would just pull your one user from the route and then fetch it's single details from a database
// })
this.setState({selectedUser: allUsers.filter(user => user.username === this.props.match.params.username)})
}
render() {
return (
<div>
<em>Do stuff with your this.state.selectedUser... things here</em>
</div>
);
}
}
Проблема с этим i, что я хочу, чтобы весь объект, а затем, когда нажимается NavLink, я хочу, чтобы пользователь был перенаправлен на компонент, так что только это отображается, а все другие пользователи не видны
@jendellkenner Контейнер вашего профиля может быть передан пользователю через props ... user = {this.state.selectedUser}, а затем на него будет ссылаться компонент. Ваш маршрутизатор должен просто сообщать на основе того, какой маршрут, какой вид / компонент загружать, и передавать базовые реквизиты для этого контейнера, с которыми затем работать.
Это здорово, но я бы предпочел, чтобы мой человек находился в состоянии в моем основном компоненте app.js.