Как обрабатывать рекурсивные пути React Router?

Question

Я работаю над приложением реагирования, в котором я реализую файловую систему, такую ​​как загрузка файлов и создание папок и т. Д. c (маленький выпадающий список). Я читал о рекурсивных путях реакции маршрутизатора по этой ссылке: 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;

Answer 1

Как насчет использования не точного пути, такого как <Route path="/files" component={Files} />, и использования this.props.location.pathname (см. документы о местоположении ) в компоненте Files для извлечения данных, которые вам нужны путь, использующий регулярное выражение и отображающий только то, что необходимо для удовлетворения ваших потребностей (например, представление относительно последней части пути)?