gpt4 book ai didi

javascript - 单击 ReactJs 中表格行中的链接时如何在不同页面中呈现组件

转载 作者:行者123 更新时间:2023-11-30 14:19:53 25 4
gpt4 key购买 nike

我是 ReactJs 的初学者,我有一个包含 html 表格的 ProjectsList 组件。其中一列是一个链接,单击该链接时必须导航到呈现 ProjectInfo 组件的不同页面。

但是,发生的情况是该组件呈现在表末尾的 ProjectsList 组件的同一页面中。ProjectsList 组件在单击 Projects 组件中的链接 Show Projects 时呈现。

Projects.component.jsx

import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";
import NewProject from "../NewProject/NewProject.component";
import ProjectsList from "../ProjectsList/ProjectsList.component";
import "./Projects.css";

export default class Projects extends Component {
render() {
return (
<div className="projects-dashboard">
<nav className="nav-up">
<ul>
<li>
<Link to={"/dashboard/projects/add"}>add project</Link>
</li>

<li>
<Link to={"/dashboard/projects/list"}>show projects</Link>
</li>
</ul>
</nav>
<main>
<Route path={"/dashboard/projects/add"} component={NewProject} />
<Route path={"/dashboard/projects/list"} component={ProjectsList} />
</main>
</div>
);
}
}

ProjectsList.component.jsx

import React, { Component } from "react";
import axios from "axios";
import { Route, Link } from "react-router-dom";
import "./ProjectsList.css";
import ProjectInfo from "../ProjectInfo/ProjectInfo.component";

export default class ProjectsList extends Component {
constructor(props) {
super(props);
this.state = {
allProject: []
}
}

componentWillMount() {
this.fetchAllProjects();
}

componentDidMount() {
document.body.style.overflowY = "auto";
}

fetchAllProjects = () => {
axios.get("/api/projects").then(res => {
this.setState({ allProject: res.data }, () => { console.log(this.state.allProject); });
});
};

render() {
const projects = this.state.allProject.map(project => {
return (
<tr>
<td>{project.id}</td>
<td>{project.title}</td>
<td>{project.organization_name}</td>
<td className="project-options">
<Link to={`/dashboard/projects/list/${project.id}`}>
<i className="far fa-eye" /> show
</Link>
</td>
</tr>
);
});

return (
<div>
<table class="projects-list-table">
<thead>
<tr>
<th>
<h1>Project ID</h1>
</th>
<th>
<h1>Project Name</h1>
</th>
<th>
<h1>Organization Name</h1>
</th>
<th>
<h1>Options</h1>
</th>
</tr>
</thead>
<tbody>{projects}</tbody>
</table>
<main>
<Route path={"/dashboard/projects/list/:id"} component={ProjectInfo} />
</main>
</div>
);
}
}

ProjectInfo.component.jsx

import React, { Component } from 'react';
import "./ProjectInfo.css";

export default class ProjectInfo extends Component {
render() {
return (
<div>
<h1>Project Info Component</h1>
</div>
)
}
}

最佳答案

React router 将那些组件包含到 Route 标签所在的指定部分。例如:

<section>
<h1>Hello</h1>
<Route path={"/random/path"} component={MyComponent} />
</section>

会回来

<section>
<h1>Hello</h1>
<MyComponent />
</section>

要解决这个问题,您需要将它添加到与 ProjectList 路由相同的路由级别。

所以改变这个

<main>
<Route path={"/dashboard/projects/add"} component={NewProject} />
<Route path={"/dashboard/projects/list"} component={ProjectsList} />
</main>

<main>
<Route path={"/dashboard/projects/add"} component={NewProject} />
<Route exact path={"/dashboard/projects/list"} component={ProjectsList} />
<Route exact path={"/dashboard/projects/list/:id"} component={ProjectInfo} />
</main>

编辑

最后一条路线不应该有确切的标签

<main>
<Route path={"/dashboard/projects/add"} component={NewProject} />
<Route exact path={"/dashboard/projects/list"} component={ProjectsList} />
<Route path={"/dashboard/projects/list/:id"} component={ProjectInfo} />
</main>

关于javascript - 单击 ReactJs 中表格行中的链接时如何在不同页面中呈现组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52944856/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com