单击按钮时重定向到适当的页面 ReactJS/Django 项目

Question

我是 Web 开发的新手，并为我的社交网络项目选择了 django/Reactjs。

我做了一些 api 方法，比如 account/view_user/ 返回用户列表和 account/view_user/ 返回特定用户的属性。

我还在 React 中写了一个页面来呈现用户列表

class PersonnelContentFeed extends React.Component {
  constructor() {
    super();

    this.state = {
      'items': []
    }
  }
  componentDidMount() {
    this.getItems();
  }

  getItems() {
    fetch('http://localhost:8000/api/account/view_user/')
    .then(results => results.json())
    .then(results => this.setState({'items': results}));
  }

  render() {
    return (
      <ul>
        {this.state.items.map(function(item, index) {
          return <PersonnelContentItem item={item} key={index} />
        })}
      </ul>
    );
  }
}

class PersonnelContentItem extends React.Component {
  render() {
    return (
      <Row className="PersonnelContentItem">
        <Col xs="3"></Col>
        <Col xs="6">
          <Card>
            <CardImg top width="100%"></CardImg>
            <CardBody>
              <CardTitle>
                <strong>{this.props.item.first_name} {this.props.item.last_name}</strong>
              </CardTitle>
              <NavLink to='./PersonDetails'><Button>
                Details
              </Button>
              </NavLink>
            </CardBody>
          </Card>
        </Col>
      </Row>
    )
  }
}

还有一个用于个人详细信息的 React 组件（类似于 PersonnelContentFeed） 问题是：

我应该怎么做才能在单击“详细信息”按钮时将用户重定向到适当的详细信息页面（使用正确的 id，例如 /api/account/view_user/1）。

谢谢大家。

Answer 1

看看 React Router URL 参数。 这很可能就是您要寻找的。

您可以使用以下路由将 url 路径定向到正确的组件（视图）：

<Router>
  <Route exact path="/account/user-list" component={UserList} />
  <Route path='/account/user/:id' component={UserDetail} />
</Router>

通过这种方式，您可以使用 url 将用户的id作为参数传递。

您可以在 React Router Docs 中看到更多示例：

https://reacttraining.com/react-router/web/example/url-params