reactjs - React Router 挂载和卸载父组件
问题描述
我正在使用 react-router@latest 和代码拆分创建一个反应应用程序。一切正常,除了当我单击关于链接或仪表板链接时布局组件会重新呈现所有内容。请帮我解决这个问题。我已经阅读了许多博客文章,但没有得到任何适合我的解决方案。
我为该https://github.com/riyasat/ReactRouterTest创建了一个存储库。
这是我的组件
主要部件
const Main = () => {
// const Layout = React.lazy(()=>import('../Core/Layout'));
return (
<div>
<ErrorBoundary>
Router Test
<Switch>
<Route exact path="/">
<Redirect to="en"></Redirect>
</Route>
<Route path="/:lang"
>
<Layout/>
</Route>
</Switch>
</ErrorBoundary>
</div>
);
};
export default Main;
布局组件
import React, { Suspense, useEffect } from "react";
import { Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
const Layout = () => {
const { url, path } = useRouteMatch();
const About =React.lazy(() => import("../Views/About"));
const Dashboard = React.lazy(() => import("../Views/Dashboard"));
useEffect(() => {
console.log("Layout Mounted");
return () => {
console.log("Un Mounted");
};
});
return (
<div>
This is Router
<Switch>
<Route exact path={`${path}`}>
<Redirect to={`${url}/about`} />
</Route>
<Route exact path={`${path}/about`}>
<About/>
</Route>
<Route exact path={`${path}/dashboard`} >
<Dashboard/>
</Route>
</Switch>
</div>
);
};
export default Layout;
关于组件
const About = () => {
return (
<div>
<Link to="dashboard">Dashboard</Link>
</div>
)
}
export default About;
仪表板组件
const Dashboard = () => {
return (
<div>
<NavLink to={`about`}>About</NavLink>
</div>
)
}
export default Dashboard;
解决方案
这是因为useRouteMatch
每当 URL 发生变化时,它所在的组件就会重新呈现。如果您将其删除并将 and 更改url
为path
固定值(即字符串),则布局组件不应在路由更改时重新渲染
推荐阅读
- python - 无法再访问 GoogleColab 的额外 RAM
- c# - 从名称中获取字符串值
- javascript - 我想用一个来自 api 的数组替换我的本地数组,同时在 javascript 中保持相同的功能。我怎样才能做到这一点?
- javascript - 如何在猫鼬中获得多个结果并将其组合在一个响应中
- javascript - 即使元素是 DOM,appendChild() 在 forEach() 方法中也不起作用
- haskell - RoutedT 在使用 Obelisk 路线时被解释为 T.Text
- reactjs - React JS 使用带有参数的 axios.get(url) 从数据库中获取数据
- ios - 有没有办法让“viewWillAppear”功能在 swiftUI 中初始化一个类并防止引用直到初始化?
- r - 计算连续的非 NA 项目
- python - 在 Windows 10 上为 PyPy3 安装 numpy 时出现问题