Node.js React-作为npm包发布的组件之间的通信和路由

我正在尝试为项目设置微型前端架构。该项目包含多个

react

应用程序。项目结构如下：

• 容器
• 标题（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;

---

我如何通知

容器

已单击

仪表板

应用程序（发布为npm包）中的

li

，并使用

react router

呈现单击的组件/应用程序？

只需将带有回调的道具传递给仪表板根组件，并将其用作

onClick

处理程序：

容器：

this.props.history.push（itemUrl）}/>

仪表板：

this.props.onItemClicked（item.url）}>{item.name}

然后，调用此函数时，容器组件可以使用

history

API推送不同的路由。如果容器正在使用

react router

（和

withRouter

），它应该连接到您设置的路由。维护路由路径（字符串）的中心文件对此很有帮助

---

或者，您可以将整个

历史记录

道具传递到仪表板。

确切地说，为什么要使用react router执行此操作？。使用函数属性可以很容易地完成。@ZunaibImtiaz我需要通知容器在仪表板中单击了一个项目，以便容器可以路由和呈现受尊重的组件。您不需要这样做。只需定义您的路线并将

li

标记替换为

react router dom提供的
Link
标记。

@ZunaibImtiaz仪表板应用程序作为npm包发布，

react router

将仅包含在容器应用程序中。仪表板上没有。

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>
  );
}