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

【问题标题】：How to dynamically route a user to a page depending the link clicked如何根据单击的链接动态地将用户路由到页面
【发布时间】：2019-01-22 14:15:58
【问题描述】：

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

我想添加在用户单击此人时显示个人资料的功能，将网址动态更改为 /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;**

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

【问题讨论】：

标签： reactjs react-router-v4 react-router-dom dynamic-routing

【解决方案1】：

我找到的解决方案是使用

{this.props.params.id}

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

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

【讨论】：

【解决方案2】：

使用链接

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

【讨论】：