Javascript 我想使用链接将道具传递到我的userdetails页面

我正在制作一个web应用程序，在该应用程序中，当使用路由器在同一页面中单击用户时，我希望显示用户的详细信息。 这是我的index.js页面

import React from "react";
import { render } from "react-dom";
import { Menu } from "./components/header";
import { MainMenu } from "./components/main";
import { ControlBar } from "./components/sidebar2";
import { Footer } from "./components/footer";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { App } from "./components/app";
import Details from "./components/userdetails";

window.React = React;

render(
  <div>
    <Menu />
    <ControlBar />
    <MainMenu />
    <BrowserRouter>
      <Switch>
        <Route path="/posts" component={App}>
          <Route path="/posts/details/:id" component={Details} />
        </Route>
        <Route path="/user-lists" component={App}>
          <Route path="/user-lists/details/:id" component={Details} />
        </Route>
        <Route path="*" component={App} />
      </Switch>
    </BrowserRouter>{" "}
    <Footer />
  </div>,
  document.getElementById("react-container")
);

从“React”导入React；
从“react dom”导入{render}；
从“/components/header”导入{Menu}；
从“/components/main”导入{MainMenu}；
从“/components/sidebar2”导入{ControlBar}；
从“/components/Footer”导入{Footer}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“/components/App”导入{App}；
从“/components/userdetails”导入详细信息；
window.React=反应；
渲染(
{" "}
,
document.getElementById（“react容器”）
);

这是我的users.js页面

import React from "react";
import MyTable from "./table";

export default class Table extends React.Component {
  constructor(props) {
    super(props);

    this.columns = [
      {
        name: "ID",
        key: "id"
      },
      {
        name: "Name",
        key: "name"
      },
      {
        name: "Username",
        key: "username"
      },
      {
        name: "Email",
        key: "email"
      },
      {
        name: "Website",
        key: "website"
      }
    ];

    this.maxItems = 5;
  }

  state = {
    pgNo: 0,
    table: [],
    isFetching: true,
    url: "https://jsonplaceholder.typicode.com/users/"
  };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(res => {
        this.setState({ table: res, isFetching: false });
      });
  }

  render() {
    return this.state.isFetching ? (
      <div
        className="loader"
        style={{
          marginLeft: "50%"
        }}
      >
        <img src="/assets/index.svg" />
      </div>
    ) : (
      <MyTable
        pgNo={this.state.pgNo}
        maxItems={this.maxItems}
        columns={this.columns}
        data={this.state.table}
        url={this.state.url}
      />
    );
  }
}

从“React”导入React；
从“/table”导入MyTable；
导出默认类表扩展React.Component{
建造师（道具）{
超级（道具）；
此值为。列=[
{
姓名：“ID”，
关键字：“id”
},
{
姓名：“姓名”，
键：“名称”
},
{
名称：“用户名”，
关键字：“用户名”
},
{
名称：“电子邮件”，
关键字：“电子邮件”
},
{
名称：“网站”，
关键词：“网站”
}
];
此参数为.maxItems=5；
}
状态={
编号:0,，
表：[]，
是的，
url:“https://jsonplaceholder.typicode.com/users/"
};
componentDidMount（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（response=>response.json（））
。然后（res=>{
this.setState（{table:res，isFetching:false}）；
});
}
render（）{
是否返回this.state.isFetching(
) : (
);
}
}

这是我的table.js页面

import React from "react";
import "../stylesheets/adminlte.css";
import Details from "./userdetails";
import { Link } from "react-router-dom";

var reg = new RegExp(/[/][0-9]+[/]?/);

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: this.props.pgNo,
      details: []
    };
    this.MaxPages = 0;
  }

  PrevButton() {
    if (this.state.currentPage === 0) {
      return null;
    } else {
      return (
        <button
          type="button"
          key={this.state.currentPage}
          style={{
            float: "left"
          }}
          onClick={() => {
            this.setState({ currentPage: this.state.currentPage - 1 });
          }}
        >
          Previous Page
        </button>
      );
    }
  }
  newTo() {}

  NextButton() {
    if (this.state.currentPage === this.MaxPages - 1) {
      return null;
    } else {
      return (
        <button
          style={{
            float: "right"
          }}
          key={this.props.pgNo}
          onClick={() => {
            this.setState({
              currentPage: this.state.currentPage + 1
            });
          }}
        >
          Next Page
        </button>
      );
    }
  }

  createTable = () => {
    let tableHeader = (
      <thead>
        <tr>
          {this.props.columns.map(column => {
            return <th key={column.name}>{column.name}</th>;
          })}
        </tr>
      </thead>
    );
    this.state.number = this.state.number + 1;
    let tableRows = [];
    for (
      let i = this.state.currentPage * this.props.maxItems;
      i < (this.state.currentPage + 1) * this.props.maxItems &&
      i <= this.props.data.length;
      i++
    ) {
      let row = (
        <Link
          to={`/user-lists/details/:${i + 1}`}
          params={{
            url: this.props.url
          }}
        >
          //not receiving anything on userdetails
          <tr key={i}>
            {this.props.columns.map(column => {
              return <td key={column.key}>{this.props.data[i][column.key]}</td>;
            })}
          </tr>
        </Link>
      );
      tableRows.push(row);
    }
    for (
      let i = 0;
      i <= Math.ceil(this.props.data.length / this.props.maxItems);
      i++
    ) {
      this.MaxPages = i;
    }

    let tableBody = <tbody>{tableRows}</tbody>;
    return (
      <table>
        {tableHeader}
        {tableBody}
      </table>
    );
  };

  render() {
    return (
      <div className="col-md-6">
        <div className="container-fluid">
          <div
            className="table table-bordered"
            style={{
              marginLeft: "70%",
              marginRight: "5%"
            }}
          >
            {this.createTable()}
            {this.PrevButton()}
            {this.NextButton()}
          </div>
        </div>
      </div>
    );
  }
}

从“React”导入React；
导入“./stylesheets/adminlte.css”；
从“/userdetails”导入详细信息；
从“react router dom”导入{Link}；
var reg=新的RegExp（/[/][0-9]+[/]？/）；
导出默认类MyTable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前页面：this.props.pgNo，
详情：[]
};
这是MaxPages=0；
}
PrevButton（）{
if（this.state.currentPage==0）{
返回null；
}否则{
返回(
{
this.setState（{currentPage:this.state.currentPage-1}）；
}}
>
上一页
);
}
}
newTo（）{}
下一个按钮（）{
if（this.state.currentPage===this.MaxPages-1）{
返回null；
}否则{
返回(
{
这是我的国家({
currentPage:this.state.currentPage+1
});
}}
>
下一页
);
}
}
createTable=（）=>{
让tableHeader=(
{this.props.columns.map（column=>{
返回{column.name}；
})}
);
this.state.number=this.state.number+1；
设tableRows=[]；
为了(
设i=this.state.currentPage*this.props.maxItems；
i<（this.state.currentPage+1）*this.props.maxItems&&
我{
返回{this.props.data[i][column.key]}；
})}
);
tableRows.push（row）；
}
为了(
设i=0；
i response.json（））
。然后（res=>{
this.setState（{details:res，isFetching:false}）；
});
}
render（）{
返回{this.state.details}；
}
}

---

每次我点击一个用户，它都不会将我链接到我的userdetail页面。我不知道我做错了什么。请随时指出您所看到的任何错误

行是tr，不能在链接元素内

为了能够在没有链接的情况下更改路由，只需在表行上使用onClick

let row = (
      <tr key={i} onClick={() => history.push(`/user-lists/details/${i + 1}`)}>
        {this.props.columns.map(column => {
          return <td key={column.key}>{this.props.data[i][column.key]}</td>;
        })}
      </tr>
  );

// example of component with route history push {}

export default class MyTable extends React.Component {}
// change component to look like below
class MyTable extends React.Component {}
export default withRouter(MyTable);

let行=(
history.push（`/user list/details/${i+1}`）}>
{this.props.columns.map（column=>{
返回{this.props.data[i][column.key]}；
})}
);
//具有路由历史推送{}的组件示例
导出默认类MyTable扩展React.Component{}
//将组件更改为如下所示
类MyTable扩展了React.Component{}
使用路由器导出默认值（MyTable）；

表中有行。创建一个包含链接和内部行的表。将链接放在行内的一列中。同时将{

/user lists/details/：${i+1}

}更改为{

/user lists/details/${i+1}

}它们没有链接到页面。它还提供了一个错误，即“Uncaught TypeError:history.push不是一个函数”，一旦单击行，onClick将运行并推送到history，这会将您的SPA重定向到用户详细信息页面。当然，您需要导入历史记录，用“withRouter”包装您的组件，您的道具中将包含历史记录。我是个新手

let row = (
      <tr key={i} onClick={() => history.push(`/user-lists/details/${i + 1}`)}>
        {this.props.columns.map(column => {
          return <td key={column.key}>{this.props.data[i][column.key]}</td>;
        })}
      </tr>
  );

// example of component with route history push {}

export default class MyTable extends React.Component {}
// change component to look like below
class MyTable extends React.Component {}
export default withRouter(MyTable);