如何根据单击的 link 将用户动态路由到页面

Question

我有一个从 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方法如下


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;**

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

Answer 1

使用 Link

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

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

Answer 2

我找到的解决方案是使用

{this.props.params.id}

其中 id 是我们在路由中使用的参数。

<Route path="/user/:username" component={UserProfile} />

如何根据单击的 link 将用户动态路由到页面

How to dynamically route a user to a page depending the link clicked

reactjs

react-router-v4

dynamic-routing

react-router-dom