如何制作单个React组件，然后使用基于URL的信息填充它？

Question

我正在建立与公司合作的人员列表。由于它不断被新人们更新，因此我决定纯粹在React中制作一个单页Web应用程序作为学习它的一种方式，因为我是新手，所以我想学习一段时间。

我有index.js和people.js。在people.js中，我为每个人创建了一个对象，每个人都有自己的属性（年龄，位置等）。

由于我不知道如何正确地进行操作，因此我为每个人制作了Home和Single组件。

Home组件类似于：

    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”及其信息。

我的问题是：

如何制作一个Home组件和一个Single Component（如模板），所以当我转到/ ann时，用Ann信息填充SingleComponent。

Home组件就像所有客户（人员）的列表： 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替换为上面的内容，则可以预览该应用程序并探索上面表达的想法。单击名称将更改到该名称的路线，并显示该名称的数据。在下面，我单击了Stace：