我想使用链接将道具传递到我的用户详细信息页面

Question

我正在制作一个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")
);

这是我的用户.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}
/>
);
}
}

这是我的表格.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>
);
}
}

最后是我的userdetails.js页面

import React from "react";
import { Link } from "react-router";
import MyTable from "./table";
export default class Details extends React.Component {
constructor(props) {
super(props);
console.log(this.props); //undefined
this.state = {
details: []
};
}
componentDidMount() {
fetch(this.props.location.url + this.props.match.params.id)
.then(response => response.json())
.then(res => {
this.setState({ details: res, isFetching: false });
});
}
render() {
return <div>{this.state.details}</div>;
}
}

每次我点击一个用户，它都不会将我链接到我的用户详细信息页面。我不知道我做错了什么。随意指出你看到的任何错误。

Answer 1

行是tr，不能在Link元素内。

要能够在没有链接的情况下更改路线，只需在表格行上单击即可。

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);