Javascript 如何处理路由器递归路径？

我正在开发一个react应用程序，其中我正在实现文件系统，比如上传文件和创建文件夹等（小dropbox）。我从这个链接读到了关于react路由器递归路径的内容： 在同一页上呈现的组件不存在。我想做那个递归模式，但不是在同一页上重新渲染，我只想渲染最新的路由数据，就像在某些服务器（如cpanel或dropbox）上使用文件系统一样。任何帮助都将不胜感激

App.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;

import React，{useState}来自“React”；
从“react router dom”导入{Switch，Route}；
从“reactstrap”导入{Row，Col}；
从“./components/Sidebar/UploadOptionSidebar”导入UploadOptionSidebar；
从“./components/BrowseFiles/BrowseFiles”导入BrowseFiles；
从“./components/CreateFolder/CreateFolder”导入CreateFolder；
从“./components/Context/main”导入{AppContext}；
const FolderDetail=（{match，child}）=>{
const{files}=React.useContext（AppContext）；
const[createFolder，setCreateFolder]=useState（false）；
常量getFiles=（）=>{
返回files.filter（（file）=>file.parent==match.params.title）；
};
返回(
文件>{'}
{match.params.title}{'}
setCreateFolder（真）}
/>
setCreateFolder（错误）}
/>
}
/>
);
};
导出默认FolderDetail；

使用非路径（如

）和

文件
组件中的
this.props.location.pathname
（请参阅）如何使用正则表达式从路径中提取所需数据，并仅呈现所需数据（例如相对于路径最后一部分的视图）