javascript - 如何处理 React Router 递归路径?
问题描述
我正在开发一个反应应用程序,我正在实现文件系统,如上传文件和创建文件夹等(小保管箱)。我正在通过此链接阅读有关反应路由器递归路径的信息:https ://reacttraining.com/react-router/web/example/recursive-paths 组件正在同一页面上呈现。我想做这种递归模式,而不是在同一页面上重新渲染,我只想渲染最新的路由数据,就像在 cpanel 或 Dropbox 等服务器上使用文件系统时一样。任何帮助,将不胜感激。
应用程序.js
<Switch>
<Route
path={"/files/:title"} component={FolderDetail} />
</Switch>
FolderDetail.js
import React, { useState } from "react";
import { Switch, Route } from "react-router-dom";
import { Row, Col } from "reactstrap";
import UploadOptionsSidebar from "../components/Sidebar/UploadOptionsSidebar";
import BrowseFiles from "../components/BrowseFiles/BrowseFiles";
import CreateFolder from "../components/CreateFolder/CreateFolder";
import { AppContext } from "../components/Context/main";
const FolderDetail = ({ match, child }) => {
const { files } = React.useContext(AppContext);
const [createFolder, setCreateFolder] = useState(false);
const getFiles = () => {
return files.filter((file) => file.parent === match.params.title);
};
return (
<div>
<React.Fragment>
<h3>
Files >{" "}
<span className={"text-muted"}>{match.params.title}</span>{" "}
</h3>
<Row className={"mt-5 mx-0"}>
<Col md={"8"}>
<BrowseFiles files={getFiles()} />
</Col>
<Col md={"3"}>
<UploadOptionsSidebar
openCreateFolder={() => setCreateFolder(true)}
/>
</Col>
</Row>
<CreateFolder
open={createFolder}
parent={match.params.title}
toggle={() => setCreateFolder(false)}
/>
</React.Fragment>
<Switch>
<Route
path={`${match.url}/:title`}
render={() => <FolderDetail match={match} child={true} />}
/>
</Switch>
</div>
);
};
export default FolderDetail;
解决方案
推荐阅读
- php - 如何使用 Laravel 运行 AngularJS 项目
- matlab - 如果 y 方向设置为“反向”,如何在 Matlab 中修复矢量注释头的错误对齐
- r - 如何编写一个 R 函数,从列索引而不是值中给出基因名称作为输出并发出错误?
- ruby - 无法在 Rubymine 2019.1 中使用 jRuby 9.1.17 运行规范
- python - 如何从 csv 文件中读取二维字典?
- regex - 多行正则表达式在 ruby 中不起作用
- reactjs - AtlasKit Form的提交方法中的状态更改问题
- javascript - 谷歌应用脚本设置日期不正确
- python - 如何将随机值设置为值非常低的 2d-numpy-array?
- r - 构建自己的for循环函数