Question

我是网络开发的新手，为我的社交网络项目选择了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 Parameters。这可能就是你要找的东西。

您可以使用以下路径将网址路径指向正确的组件（视图）：

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

这样您就可以使用网址将用户的id作为参数传递。

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

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

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

1 个答案: