javascript - 反应路由器 v6 在组件之外导航
问题描述
在 react-router v5 中,我创建了这样的历史对象:
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
然后将其传递给路由器:
import { Router, Switch, Route, Link } from "react-router-dom";
<Router history={history}>
... my routes
</Router>
我这样做是为了有机会了解组件之外的使用历史:
// store action
logout() {
this.user = null;
history.push('/');
}
通过这种方式,我将逻辑移到了 store 中,并且组件尽可能保持干净。但是现在,在反应路由器 v6 中我不能做同样的事情。我仍然可以useNavigate()
在我的组件内部导航,但我无法创建一个navigate
将其用于我的商店。有没有其他选择?
解决方案
好吧,事实证明,如果您实现一个自定义路由器,该路由器以与 RRDv6 路由器相同的方式实例化历史状态,那么您可以复制该行为。
检查BrowserRouter的实现,例如:
export function BrowserRouter({ basename, children, window }: BrowserRouterProps) { let historyRef = React.useRef<BrowserHistory>(); if (historyRef.current == null) { historyRef.current = createBrowserHistory({ window }); } let history = historyRef.current; let [state, setState] = React.useState({ action: history.action, location: history.location }); React.useLayoutEffect(() => history.listen(setState), [history]); return ( <Router basename={basename} children={children} location={state.location} navigationType={state.action} navigator={history} /> ); }
创建一个CustomRouter
使用自定义history
对象并管理状态的:
const CustomRouter = ({ history, ...props }) => {
const [state, setState] = useState({
action: history.action,
location: history.location
});
useLayoutEffect(() => history.listen(setState), [history]);
return (
<Router
{...props}
location={state.location}
navigationType={state.action}
navigator={history}
/>
);
};
history
这有效地将自定义对象代理到Router
并管理导航状态。
从这里你可以CustomRouter
用自定义history
对象交换现有的Router
从react-router-dom
.
export default function App() {
return (
<CustomRouter history={history}>
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</div>
</CustomRouter>
);
}
您的代码和框的分支:
推荐阅读
- c - 尝试将每个字符串转换为整数并将每个元素存储到 int**
- ethereum - 在solidity中转换和理解价值观
- django - 博客详细信息模板不存在错误
- android - 如何模糊bottomappbar的背景?android/kotlin
- javascript - DirectioanlLight 在 Three.js 中不起作用
- azure - 在工作时间在 prod 中部署 azure apim 策略
- javascript - 为什么算法没有进入函数?(或者有时会,但很晚)
- jquery - 复选框选择过滤器jQuery在wordpress中不起作用但在codepen中起作用
- python - 如何在 PyQt5 标签中输入多个参数?
- ruby-on-rails - 在 Rails.application 初始化器中导入模块