reactjs - 如何根据单击的链接动态地将用户路由到页面

问题描述

我有一个从 Github API 获取的用户列表。我有一个组件可以接受用户名作为道具并显示有关用户的详细信息。

我想添加当用户点击它时显示该人的个人资料的功能，将 url 动态更改为 /users/:username 并显示他的个人资料。

或者，如果有一种方法可以从 url 中获取用户名。

我只使用 react 构建了应用程序（没有后端）

分享User.js的代码

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';

class User extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: [],
      isLoaded: false
    };
  }

  componentDidMount() {
    console.log(this.props.u);
    console.log(this.props.params.username);

    let furl = 'https://api.github.com/users/'.concat(
      this.props.params.username
    );
    console.log(furl);
    fetch(furl)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          user: json
        });
      });
    console.log(this.state.user);
    console.log(this.state.user.id);
  }

  render() {
    var { isLoaded, user } = this.state;

    if (!isLoaded) {
      return (
        <Fragment>
          <div>Loading ....</div>
        </Fragment>
      );
    } else {
      return (
        <Fragment>
          <div>{user.name}</div>
          <img src={user.avatar_url} />
        </Fragment>
      );
    }
  }
}

export default User;

渲染方法如下


render() {
    var { isLoaded, user } = this.state;
    if (!isLoaded) {
      return <div>Loading ....</div>;
    } else {
      return (
        <Fragment>

          <Switch>
            <Route
              exact
              path="/"
              render={() => (
                <Fragment>

                  <div className="list-User">
                    <ul className="user-unordered-list">
                      {user.map(user => (
                        <li key={user.id}>
                          <div className="user-info">
                            <img src={user.avatar_url} />
                            <h1> {user.login}</h1>
                            <p>
                              <a href={user.html_url}>Github Profile</a>
                            </p>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </Fragment>
              )}
            />
              <Route
              path="/search"
              render={({ history }) => (
                <Fragment>
                  <UserSearch searchString={this.state.query} />
                </Fragment>
              )}
            />
            <Route
              path="/user/:username"
              render={({ history }) => (
                <div className="user-profile">
                  <User u={this.state.query} />
                </div>
              )}
            />
          </Switch>
        </Fragment>
      );
    }
  }
}

**export default App;**

前两条路线显示用户列表。我想添加当有人单击从搜索返回的用户列表时能够重定向到该配置文件的功能。

标签： reactjsreact-router-v4react-router-domdynamic-routing

reactjs - 如何根据单击的链接动态地将用户路由到页面

问题描述

解决方案

推荐阅读