Reactjs 具有状态管理和重新获取功能的边栏路由

我很难理解如何使用边栏和有条件地重新加载状态来路由。我的意思是，当选择侧栏中的路由时，该路由的数据将加载到侧栏右侧的主容器中

​

当点击几个路由时，我希望用户能够返回到上一个路由，而不必重新获取数据。我知道如何解除状态，这不需要重新获取页面。问题是，当再次有目的地单击链接时，我希望重新获取数据，但显示的是旧状态

​

进近1解除状态：

主容器组件已加载，每个路线的数据都是手动加载的 已获取（效率低下，但正在测试）

然后将状态传递给所述组件中的路由

可以在不重新加载的情况下来回移动

点击“项目”后的“Hone”，没有任何东西被重新获取，旧的 始终显示数据

​

方法2组件中的状态：

单击侧边栏项目时，路由将加载到上的路由

在组件中本地处理的获取

返回或向前重新获取

点击“项目”后的“Hone”，将按如下方式重新获取数据： 有意的

​

我已经尝试了很多不同的方法，但我只能无限期地控制国家，或者每次都回来。没有我想要的混合抓取和状态缓存。在过去的两天里我一直在这样做，我放弃了。下面是基于组件的本地状态/常量路由重新获取的代码。任何帮助都将不胜感激

主容器

import React from "react";
import SideBar from "./Sidebar";
import Header from "./Header";
import Routes from "./Routes";

function MainContainer() {
    return (
        <>
            <div className="main-sidebar">
                <SideBar />
            </div>
            <div className="main-content">
                <Header />
                <Routes />
            </div>
        </>
    );
}

export default MainContainer;

从“React”导入React；
从“/SideBar”导入侧栏；
从“/Header”导入标题；
从“/Routes”导入路由；
函数MainContainer（）{
返回(
);
}
导出默认主容器；

边栏

import React from "react";
import { NavLink } from "react-router-dom";
import Nav from "react-bootstrap/Nav";

function SideBar({ onClick }) {
    const linkItems = [
        { name: "Home", to: "/" },
        { name: "Item", to: "/item" },
        { name: "Dashboard", to: "/dashboard" },
    ];

    const sidebarItems = linkItems.map((item) => (
        <Nav.Item key={item.to}>
            <NavLink exact to={item.to} activeClassName="sidebar-active-nav" className="nav-link sidebar-inactive-nav">
                <h3>{item.name}</h3>
            </NavLink>
        </Nav.Item>
    ));

    return <Nav className="flex-column">{sidebarItems}</Nav>;
}

export default SideBar;

从“React”导入React；
从“react router dom”导入{NavLink}；
从“反应引导/Nav”导入Nav；
函数侧栏（{onClick}）{
常量链接项=[
{姓名：“家”，收件人：“/”}，
{name:“Item”，至：“/Item”}，
{name:“Dashboard”，收件人：“/Dashboard”}，
];
const sidebarItems=linkItems.map（（项）=>(
{item.name}
));
返回{sidebarItems}；
}
导出默认边栏；

路线

import React from "react";
import { Switch, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Item from "./Item";
import Home from "./Home";

function Routes() {
    return (
        <div className="container-fluid">
            <Switch>
                <Route path="/" exact render={(props) => <Home key="1" {...props} />} />
                <Route path="/item" render={(props) => <Item key="2" {...props} />} />
                <Route path="/dashboard" render={(props) => <Dashboard key="3" {...props} />} />
            </Switch>
        </div>
    );
}

export default Routes;

从“React”导入React；
从“react router dom”导入{Switch，Route}；
从“/Dashboard”导入仪表板；
从“/Item”导入项目；
从“/Home”导入主页；
函数路由（）{
返回(
} />
} />
} />
);
}
导出默认路径；

路由组件的示例

import { useEffect } from "react";
import Component from "react-bootstrap/Container";
import Spinner from "react-bootstrap/Spinner";
import useFetch from "../helpers/Fetcher";

function Dashboard() {
    const [data, loading] = useFetch("https://raw.githubusercontent.com/epicmau5time/demo/master/test.json");

    useEffect(() => {
        return () => {
            console.log("cleaned up");
        };
    }, []);

    return (
        <Component className="page-container">
            <h2>Dashboard</h2>
            {!loading && data ? (
                data.map((data) => (
                    <div key={data.id}>
                        <p>{data.title}</p>
                    </div>
                ))
            ) : (
                <div className="justify-content-center text-center">
                    <Spinner className="" animation="border" variant="primary" role="status">
                        <span className="sr-only">Loading...</span>
                    </Spinner>
                </div>
            )}
        </Component>
    );
}

export default Dashboard;

从“react”导入{useffect}；
从“react引导/容器”导入组件；
从“反应引导/微调器”导入微调器；
从“./helpers/Fetcher”导入useFetch；
函数仪表板（）{
const[data，loading]=useFetch（“https://raw.githubusercontent.com/epicmau5time/demo/master/test.json");
useffect（（）=>{
return（）=>{
控制台日志（“已清理”）；
};
}, []);
返回(
仪表板
{！正在加载&数据吗(
data.map（（数据）=>(
{data.title}

))
) : (
加载。。。
)}
);
}
导出默认仪表板；

获取帮助程序