Как динамически направить пользователя на страницу в зависимости от нажатой ссылки

Question

У меня есть список пользователей, которые я получаю из Github API. У меня есть компонент, который может принимать имя пользователя в качестве реквизита и отображать сведения о пользователе.

Я хочу добавить возможность показа профиля человека, когда пользователь нажимает на него, динамически изменяя URL-адрес на /users/:username и показывая его профиль.

В качестве альтернативы, если есть способ, которым мы можем получить имя пользователя из URL.

Я построил приложение, используя только реакцию (без сервера)

Поделиться кодом 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;**

Первые два маршрута показывают список пользователей. Я хочу добавить возможность, когда кто-то нажимает на список пользователей, возвращенных из поиска, чтобы иметь возможность перенаправить на этот профиль.

Answer 1

Я нашел решение использовать

{} This.props.params.id

где id будет параметром, который мы использовали в маршруте.

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

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