我正在尝试为该项目设置微前端架构。该项目包含多个 react
应用程序。以下是项目结构:
- 容器
- header (npm 包)
- 仪表板(npm 包)
- app1(npm 包)
- app2(npm 包)
- app3(npm 包)
在这里,容器充当其他应用程序的包装器。仪表板应用程序显示其他应用程序的链接,例如 app1、app2、app3 等...
用户登录后,标题和仪表板应用程序将呈现在页面上。用户可以从仪表板导航到其他应用程序。
容器
import React, { useState, useEffect } from 'react';
import Header from 'header';
import Dashboard from 'dashboard';
import { api } from '../api';
function storeUser(user) {
if (user) {
localStorage.user = JSON.stringify(user);
} else {
delete localStorage.user;
}
}
function Container() {
const [error, setError] = useState([]);
const [user, setUser] = useState();
const login = async () => {
try {
const user = await api({
endpoint: 'identity/login',
method: 'POST',
json: {
email: 'test@abc.com',
password: '12345'
}
});
setUser(user);
storeUser(user);
} catch (err) {
setError(err.message);
}
};
return (
<div>
<input type="submit" value="Login" onClick={() => login()}></input>
{user ? (
<div>
<Header />
<Dashboard />
</div>
) : (
<span>{error}</span>
)}
</div>
);
}
export default Container;
仪表板
function Dashboard() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await getApps();
setData(response);
};
fetchData();
}, []);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
如何通知 container
dashboard
应用程序(作为 npm 包发布)中的 li
已被单击并渲染单击的组件/app 使用 react-router
?
最佳答案
只需将带有回调的 prop 传递给仪表板根组件并将其用作 onClick
处理程序:
容器:
<Dashboard onItemClicked={(itemUrl) => this.props.history.push(itemUrl)} />
仪表板:
<li key={item.id} onClick={() => this.props.onItemClicked(item.url)}>{item.name}</li>
然后容器组件可以使用 history
调用此函数时推送不同路由的 API。如果容器正在使用react-router
(和 withRouter
)它应该挂接到您设置的路由中。维护路由路径(字符串)的中央文件对此很有帮助。
或者,您可以传递整个 history
支撑到仪表板。
关于node.js - React - 作为 npm 包发布的组件之间的通信和路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60005400/