Как сделать один компонент React, а затем заполнить его информацией на основе URL?

Question

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

У меня есть index.js и people.js. В people.js я создал объект для каждого человека, и у каждого из них есть свои атрибуты (возраст, местоположение и т. Д.).

Так как я не знаю, как это сделать правильно, я сделал для каждого человека Дом и Отдельный компонент этого.

Домашний компонент выглядит примерно так:

    export class AnnHome extends Component{
  render(){
    return(
    <div>
      <Link to={{pathname: 'influencer/Ann',
                  component: 'AnnSingle'
      }}>
      <img
        src={require('./img/ann.png')}
        alt="{Kofs.name}"
        className="Avatar rounded-circle"
      /></Link>
    <p>{Ann.name}</p>
    </div>
    )
  }
}

До этого компонента я определил объект 'Ann' с его информацией.

Мой вопрос:

Как сделать один домашний компонент и один отдельный компонент похожим на шаблон, чтобы при переходе к / ann заполнить SingleComponent информацией Ann.

Домашний компонент будет похож на список всех клиентов (людей): https://www.w3schools.com/howto/howto_css_team.asp как то так.

В настоящее время у меня есть много компонентов Home, которые я поместил вручную.

Надеюсь, я описал свою проблему, мой английский ржавый: D

Answer 1

Надеюсь, это поможет вам начать.

Как я упоминал выше, вы хотите использовать React Router для прослушивания изменений маршрута. Затем указывается, какой компонент должен быть смонтирован для каждого маршрута. Здесь я использую маршрут для сопоставления имени человека (например, /stace соответствует элементу в people, где атрибут name человека равен Stace.

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

const people = [
  {name: 'Stace', img: 'https://placeimg.com/200/200/people'},
  {name: 'Marlo', img: 'https://placeimg.com/201/200/people'},
]

const App = props => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path='/stace' component={Person} />
        <Route path='/marlo' component={Person} />
      </Switch>
      {people.map((p, idx) => <Link to={'/' + p.name}>{p.name}</Link>)}
    </div>
  </BrowserRouter>
)

const Person = props => {
  const name = props['match']['path'].toLowerCase().substring(1);
  const person = people.filter(p => p.name.toLowerCase() == name)[0]
  return (
    <div className='person'>
      <img src={person.img || ''}></img>
      <h2>{person.name || ''}</h2>
    </div>
  )
}

export default App;

Это, конечно, только для демонстрации концепций, связанных с маршрутизатором. Если вы используете create-react-app, запустите yarn add react-router@4.3.0 && yarn add react-router-dom@4.3.1 и замените App.js на содержимое, указанное выше, вы сможете просмотреть приложение и изучить идеи, изложенные выше. Нажатие на имя изменит маршрут на это имя и отобразит данные для этого имени. Ниже я нажал на Стейс: