Передайте идентификатор каждому <Link>

Question

У меня проблема с передачей идентификатора каждому в зависимости от идентификатора.

У меня есть список компонентов (с разными реквизитами), и мне нужно добавить взаимодействие с каждым компонентом, ссылка на эту страницу зависит от идентификатора.

export const ResultItem = (id) =>

         <div>
            <Link to={{ 
                  pathname: `/idea/${id}`,
                }}><button>View Recipe</button></Link>
          </div>
;

Позже в дочернем компоненте мне нужен доступ к этому идентификатору, чтобы сделать API CALL для конечной точки с определенным идентификатором для получения данных и их рендеринга.

class Component extends Component{

  componentDidMount() {

    // how can i declare variable depends on id here (i have id in url too

    axios
    fetch('http://localhost:50647/fund/GetFund/{id}')
    (API CALL LOGIC)
  }

  render(){
      return(
          <div>  
          </div>
      )
  }
};

Как передать id в дочерний компонент через Link и объявить его как переменную, чтобы API CALL зависело от id?

Answer 1

Вы можете получить такой идентификатор внутри компонента вашей страницы:

this.props.match.params.id

С вашим кодом, используя withRouter(component)

componentDidMount() {
  axios.fetch('http://localhost:50647/fund/GetFund/{this.props.match.params.id}')
}

Answer 2

Если вы используете реагирующий маршрутизатор, вы можете использовать:

this.props.match.params.id

Для доступа к переменной пути (path pathm).

Будьте осторожны, чтобы использовать Router HOC для доступа к информации о маршрутизации в реквизите.

export default withRouter(MyComponent);

Answer 3

Если другие ответы не работают для вас, возможно, вы можете попробовать:

const linkCustomProps = { id: 4 };
const toObject = { pathname: "/", customProps: linkCustomProps };
<Link to={toObject}>Click me</Link>;

Затем вы можете получить доступ к значению с помощью:

this.props.location.customProps.id

Кстати, я используюHashRouting на стороне клиента в моей конкретной ситуации.