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

【问题标题】：Redirect to appropriate page while clicking on Button ReactJS/Django project单击按钮 ReactJS/Django 项目时重定向到适当的页面
【发布时间】：2018-02-18 23:48:08
【问题描述】：

我是 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）。

提前谢谢大家。

【问题讨论】：

标签： javascript django reactjs react-router

【解决方案1】：

看看 React Router URL 参数。这可能就是您正在寻找的。p>

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

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

这样你就可以使用url传递用户的id作为参数。

您可以在 React Router 文档中查看更多示例：

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

【讨论】：