Javascript 如何访问不同组件中的用户详细信息

我已经创建了一个用户公文包react应用程序。此应用程序具有身份验证，因此只有登录用户才能看到：注册用户+他们的公文包。在我的App.js组件中，我存储了用户的道具。在我的名为“Folio”的投资组合组件中。我可以使用以下变量访问登录用户id，

this.props.match.params.id

，并显示登录用户id。 我想知道我将如何通过这种方式访问用户名或电子邮件。 经过多次尝试，我似乎只能访问用户ID

下面是App.js中的代码

class App extends Component {
  constructor() {
    super();
    this.state = {loggedIn: false, user: {email: '', name:''}};
    this.logout = this.logout.bind(this);
    this.login = this.login.bind(this);
  }

  logout(props) {
    axios.get('api/logout')
      .then(res => {
        this.setState({loggedIn: false});
        props.history.push('/');
      })
      .catch( err => console.log(err));
    return null;
  }

  login(user) {

    this.setState({loggedIn: true, user: user});
  }

这是对开部分。请注意，我如何使用

this.props.match.params.id

访问用户id，但我无法访问名称或电子邮件

export default class Folio extends Component {
  constructor(props) {
    super(props);
    this.state = {
      folio: []
    };
  }

  componentDidMount() {
    console.log('Howdy ' + `${this.props.match.params.id}`);
    console.log('Howdy ' + `${this.props.user.name}`);
    axios.get(`/api/users/${this.props.match.params.id}/folios`)
      .then(response => {
        this.setState({folio: response.data});
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }

我只是将

：id

添加到路线中

  <Link to={`/folio/${this.props.id}`}>
        <button className="button is-link" type="button">
              View Portfolios
        </button>
      </Link>

  <Route path="/folio/:id" render={(props) => <Folio {...props} user={this.state.user}/>} />

查看投资组合
} />

---

然而，我正在寻找的名称以及

您应该像使用

id

一样将它们传递给组件，并且应该以相同的方式访问它们，例如=>

this.props.match.params.name

。我猜您只是将ID传递给组件。

请创建一个ID，以便有人能更方便地帮助您

match.params.id

将获取

:id

路径属性的值，例如

/path/to/:id

。路径中也有

：email

和

：username

吗？嗨，很抱歉，我是新来的。我已经添加到上面的摘要中，我只在路径的末尾使用：id。当我添加：name时，我得到一个错误。您将使用什么语法将：id和：name传递到路径？谢谢