使用Amplify Studio实现React应用导航的问题咨询

核心思路：用包装组件隔离自定义逻辑 #

直接修改Amplify生成的ui-components目录下文件会被amplify pull覆盖，所以所有导航逻辑都放在自定义包装组件里，包裹Amplify生成的导航组件，同时集成React Router实现无刷新跳转。

方案1：自定义事件 + React Router导航 #

1. 在Amplify Studio中配置自定义事件

   • 不要选择「跳转至URL」，而是选择「触发自定义事件」，给事件命名（比如navigateToPage）。
   • 给事件添加参数：比如targetPath，值设置为目标组件的路由路径（如/about）。

2. 创建包装组件
   新建CustomNavigation.jsx，导入Amplify生成的导航组件和React Router的useNavigate：

   import { AmplifyNavigation } from './ui-components'; // 替换成你的Amplify导航组件名
   import { useNavigate } from 'react-router-dom';
   
   export const CustomNavigation = () => {
     const navigate = useNavigate();
   
     // 处理Amplify触发的自定义事件
     const handleNavEvent = (event) => {
       const targetPath = event.detail.data.targetPath;
       navigate(targetPath); // 用React Router实现无刷新跳转
     };
   
     return <AmplifyNavigation onNavigateToPage={handleNavEvent} />;
   };
   

3. 在App中使用包装组件
   确保App已配置React Router，并用CustomNavigation替代原Amplify组件：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import { CustomNavigation } from './CustomNavigation';
   import Home from './pages/Home';
   import About from './pages/About';
   
   function App() {
     return (
       <Router>
         <CustomNavigation />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
   }
   
   export default App;
   

方案2：事件委托（适配无自定义事件的组件） #

如果Amplify生成的组件没暴露自定义事件属性，用事件委托在包装层监听点击：

1. 在Amplify Studio给导航项加数据属性
   给每个导航元素添加data-path属性，值为目标路由路径（如data-path="/home"）。

2. 包装组件实现事件委托

   import { AmplifyNavigation } from './ui-components';
   import { useNavigate } from 'react-router-dom';
   import { useRef, useEffect } from 'react';
   
   export const CustomNavigation = () => {
     const navigate = useNavigate();
     const navRef = useRef(null);
   
     useEffect(() => {
       const handleClick = (e) => {
         const targetPath = e.target.closest('[data-path]')?.dataset.path;
         if (targetPath) {
           e.preventDefault(); // 阻止默认整页刷新
           navigate(targetPath);
         }
       };
   
       navRef.current?.addEventListener('click', handleClick);
       return () => navRef.current?.removeEventListener('click', handleClick);
     }, [navigate]);
   
     return <AmplifyNavigation ref={navRef} />;
   };
   

关键注意事项 #

• 永远不要直接修改ui-components下的Amplify生成文件，所有自定义逻辑都放在外层包装组件中。
• 执行amplify pull后，只需确保包装组件导入的Amplify组件名正确即可，自定义逻辑不会被覆盖。

内容的提问来源于stack exchange，提问作者ravi