Tôi đang sử dụng ví dụ bên cung cấp trong tài liệu chính thức của phản ứng-router-v4 như một nguồn cảm hứng https://reacttraining.com/react-router/web/example/sidebarCách sử dụng các tuyến lồng nhau để thêm nội dung vào một trang mà không xóa nội dung của tuyến đường trước đó bằng phản ứng-router-v4?
1- Vì vậy, các URL ban đầu của ứng dụng của tôi sẽ là: localhost:3000/search-page/Lists
2- Tôi có một danh sách các liên kết có thể nhấp, khi nhấp hiển thị các dữ liệu nhấp vào thanh bên, và khi điều này xảy ra, URL được cập nhật: localhost:3000/search-page/Lists/itemList1selected
3 sau đó tôi nhấn vào nút "Hiển thị Danh sách số 2" để hiển thị một danh sách mới
4 - Mục tiêu của tôi là sử dụng các tuyến lồng nhau, khi tôi nhấp vào một Liên kết từ "Danh sách số 2". nó sẽ thêm nó bên dưới mục đã chọn từ "Danh sách số 1" ... và cập nhật URL cùng một lúc: localhost:3000/search-page/Lists/itemList1selected/itemList2selected
đây là mã hiện tại của tôi:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
showListButtonPressed: true
};
this.showTheOtherList = this.ShowTheOtherList.bind(this);
}
showTheOtherList() {
this.setState({
showListButtonPressed: !this.state.showListButtonPressed
});
}
render() {
const dataList1 = dataFromDataBase
.allItemsFromList1()
.map(list1 => ({
path: `${this.props.match.params.type}/${list1.id}`,
mainList1:() => (
<div>
{`${list1.company} ${list1.name} ${list1.price}`}
</div>
),
sidebarList1:() => (
<div>
<h3>item List 1 selected</h3>
{list1.company}
</div>
)
}));
const dataList2 = fakeFlightApiDataTesting
.allItemsFromList2()
.map(list2 => ({
path: `${this.props.match.params.type}/${list2.id}`,
mainList2:() => (
<div>
{`${list2.company} ${list2.name} ${list2.price}`}
</div>
),
sidebarList2:() => (
<div>
<h3>item List 2 selected</h3>
{list2.company}
</div>
)
}));
return (
<div style={{ display: 'flex' }}>
<div style={{ width: '20%' }}>
{dataList1.map(route => (
<div>
<Route
key={route.path}
path={`/search-page/${route.path}`}
exact={route.exact}
component={route.sidebarList1}
/>
</div>
))}
{dataList2.map(route => (
<div>
<Route
key={route.path}
path={`/search-page/${route.path}`}
exact={route.exact}
component={route.sidebarList2}
/>
</div>
))}
</div>
<div>
// Switch the lists when button is pressed
{this.state.showListButtonPressed ? (
<div>
<ul>
{dataList1.map(route => (
<li key={route.path}>
<Link to={`/search-page/${route.path}`}>
{route.mainList1()}
</Link>
</li>
))}
</ul>
<button onClick={this.showTheOtherList}>
Switch Lists
</button>
</div>
) : (
<div>
<ul>
{dataList2.map(route => (
<li key={route.path}>
<Link to={`/search-page/${route.path}`}>
{route.mainList2()}
</Link>
</li>
))}
</ul>
<button onClick={this.showTheOtherList}>
switch Lists
</button>
</div>
)}
</div>
</div>
);
}
}
đây là một số ảnh chụp màn hình để có một ý tưởng tốt hơn:
Tôi thực sự cố gắng để thích nghi với các quan chức Phản ứng Router v4 https://reacttraining.com/react-router/web/example/recursive-paths cho vấn đề của tôi. Bạn có bất kỳ ý tưởng làm thế nào để thực hiện điều đó? – AziCode
Trước khi bạn định triển khai một cái gì đó, hãy giải thích những gì bạn đang cố gắng để đạt được UI-khôn ngoan. Câu hỏi của bạn được trả lời với các cách tiếp cận và ví dụ khác nhau. Tôi đoán bạn đang cố gắng để chỉ hiển thị 2 cấp độ, có thể đến sân bay khởi hành, nhưng mức này không nhất thiết có nghĩa là để được lồng nhau anyway. Chỉ cần đoán thôi. –
Tôi nghĩ rằng tôi đã đưa ra rất nhiều chi tiết trong câu hỏi của mình, và tôi giải thích với mã và thậm chí cả hình ảnh giải thích mục tiêu của tôi là gì. Câu trả lời của Trey là câu trả lời cho tôi thấy đúng hướng và bạn chỉ có thể chọn một câu trả lời. Và bằng cách ví dụ mà bạn đăng là từ tài liệu chính thức, do đó, nó không cung cấp bất cứ điều gì mới – AziCode