Question

正如您在这张图片上看到的，我正在尝试从地址栏/网址获取ID。然后用户，单击该用户将被重定向到问题页面。从那里我无法获得ID。

在我的App.js文件中，具有此组件，这将加载所有问题，我需要在下一页上存储ID，以便我可以通过ID在数组中搜索。

这是questions.js页面，多数民众赞成在渲染问题。我需要网址中的ID

import React, { Component } from "react";
import QuestionItem from "./QuestionItem";
import Question from "./Question";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

export class Questions extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return this.props.dataFromParent
      .filter(e => e.id === 1) //Parse id from URL here, but HOW????
      .map((column, index) => (
        <div className="container mt-5" key={index}>
          {column.name}
          <br></br>
        </div>
      ));
  }
}

export default Questions;

这是我从app.jss出发的路线，我确实尝试将id解析为从路线到组件的道具。但这行不通。

<Questions
  exact
  path="/question/:id"
  dataFromParent={this.state.questions}
  idFromUrl={this.props.id}
  component={Questions}
></Question>

我是React的新手，所以我不知道该怎么做才能使它正常工作。

Answer 1

您可以通过执行以下操作来解析您的信息：

<Questions
  exact
  path={"/question:" + this.props.id }
  dataFromParent={this.state.questions}
  idFromUrl={this.props.id}
  component={Questions}
></Question>

然后使用props.match.params从react-router检索对象（一定要与Routerr一起导入）。要与withRouter一起使用，请先从react-router-dom

导入

import { withRouter } from "react-router-dom";

这是一个高级组件，换句话说，它包装了您的组件，因此您可以在导出过程中应用它，如下所示：

export default withRouter(Questions);

此后，路由器将向您发送一个对象（我建议您做一个console.log（this.props）来查看router从您的路径提供的所有信息）

这里是参考，祝您编程愉快！

https://reacttraining.com/react-router/core/api/withRouter

Answer 2

您应使用.... final int minutes = (total_seconds / 60) % 60; final int seconds = total_seconds % 60; String paddedMinutes = String.format("%02d" , minutes); String paddedSeconds = String.format("%02d" , seconds); System.out.printf("You entered %d second(s), which is ", total_seconds); if (hours == 0) { System.out.printf("%d minute(s), and %d second(s).\n", minutes, seconds); System.out.print(paddedMinutes + ":" + paddedSeconds); } else if ( ... ) { ... }将路由器参数添加到withRouter组件中，如下所示：

Questions

Answer 3

我找到了解决问题的办法。我无法想到要工作。但这现在有效！

无法从网址获取ID

3 个答案: