我正在制作一个Web应用程序，当我使用路由器在同一页面上单击用户的详细信息时，我想显示该用户的详细信息。 这是我的index.js页面
window.React = React;
render(<div>
<Menu/><MainMenu/><App/><Footer/>
</div>, document.getElementById('react-container'))
这是我的App.js页面
class App extends Component {
render () {
return (
<div>
<BrowserRouter>
<Side>
<Route path="/" component={Side}>
<Route exact path="/" component={Home}/>
<Route path="/user-lists" component={Table}>
</Route>
</Route>
</Side>
</BrowserRouter>
</div>
)
}
}
export default App
这是我的用户页面
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}/>
)
}
}
这是我的Sidebar.js页面
export const Side = () =>
<aside className="main-sidebar sidebar-dark-primary elevation-4">
<a href="#" className="brand-link">
<span className="brand-text font-weight-light">Dashboard</span>
</a>
<div className="sidebar">
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image"></div>
<div className="info">
<a href="#" className="d-block">Irtaza</a>
</div>
</div>
<nav className="mt-2">
<li><Link to='/'>Home</Link></li>
<li><Link to='/posts'><Fausers /> Posts </Link></li>
<li><Link to='/user-lists'><Fafile/> Users </Link></li>
<li><Link to='*'><Fatimes/> Whoops 404 </Link></li>
</nav>
</div>
</aside>
最后这是我的table.js页面
export default class MyTable extends React.Component {
constructor(props) {
super(props);
this.state = {
currentPage: this.props.pgNo,
details : [],
id: null
}
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>
);
}
}
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++) {
this.state.id= i + 1;
let row = <Link to={{
pathname: `/user-lists/details(/${i+1})`
}}>
<tr key={i}>
{this
.props
.columns
.map(column => {
this.state.id= i + 1;
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>
)
}
}
每次我单击sidebar.js中的链接 它将我重定向到新链接，但不呈现任何内容，还给我一个错误“无法加载资源：服务器响应状态为404（未找到）” 我不知道我在做什么错。随时指出您看到的任何错误。
答案 0 :(得分：1)
首先，为了使Link正常工作，它需要接收路由器道具，但是由于其被渲染为路线，因此它不接收任何道具。
第二，所有路由均被定义为Side的子级，但是它们从未在Side组件中呈现
您将像这样编写组件
App.js
class App extends Component {
render () {
return (
<div>
<BrowserRouter>
<div>
<Route component={Side}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/user-lists" component={Table}>
<Route path="*" component={NotFound}/>
</Switch>
</div>
</BrowserRouter>
</div>
)
}
}
export default App
和 Side.js
export const Side = (props) => (
<aside className="main-sidebar sidebar-dark-primary elevation-4">
<a href="#" className="brand-link">
<span className="brand-text font-weight-light">Dashboard</span>
</a>
<div className="sidebar">
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image"></div>
<div className="info">
<a href="#" className="d-block">Irtaza</a>
</div>
</div>
<nav className="mt-2">
<li><Link to='/'>Home</Link></li>
<li><Link to='/posts'><Fausers /> Posts </Link></li>
<li><Link to='/user-lists'><Fafile/> Users </Link></li>
<li><Link to='*'><Fatimes/> Whoops 404 </Link></li>
</nav>
</div>
</aside>
)