Javascript 映射组件时渲染条件路由

我有一个应用程序，其中映射了一些示例用户组件。我添加了一些道具，我想制作一个有条件的导航链接，它只呈现一个简单的显示名称的“配置文件组件”

到目前为止，我已经制作了一个条件导航，组件内部的链接，并且道具得到了正确的发送，它显示了我的用户组件下的段落，但是我想让它重定向，所以它只显示概要文件组件

有没有办法让它只显示那个组件。我试着用开关，但我意识到，它只显示第一个，路由，所以其他的一切，仍然会显示

 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.log(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>
)
}

render（）{
让persons=this.state.persons.map（（项目，索引）=>{
报税表（
)
})
//用户组件
render（）{
console.log（this.props.name）
返回(
{this.props.name}
它在这里={this.props.loggedInProp}

点击我
//轮廓组件
常量配置文件=（{match}）=>{
返回(
你好{match.params.username}

)
}

这很好，但我更愿意让我的人处于状态，在我的主app.js组件中。问题是，我希望所有对象都处于状态，然后当单击导航链接时，我希望用户重定向到该组件，因此仅此显示，而所有其他用户都不处于状态visible@jendellkenner您的配置文件容器可以是pa通过props…user={this.state.selectedUser}在用户中插入，然后在组件中引用。您的路由器应该根据要加载的路由、视图/组件告诉用户，并传入容器的基本props，然后再使用。

<Route
    exact
        path="/profile/view/:username"
        render={props => <ProfileView {...props} />}
/>

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>
     );
  }
}