小编Ber*_*ren的帖子

这是我的主要部分类，其中保留了链接的所有路由

export default class Section extends React.Component {
    render() {
        return (
            <div style={{backgroundColor:"white"}}>
                   <Routes>
                   <Route path="/"  element={<Home/>} />
                    <Route path="/discover" element={<Discover/>}   />
                    <Route path="/shop/makeup" element={<Makeup/>}  />
                    <Route path="/home/:id" element={<DetailsPage/>}  />
                    </Routes>
            </div>
        )}}

这是我的卡片页面，它正在从上下文中获取数据。

import React from 'react';
import {DataContext} from './CardData.js';
import {Link} from 'react-router-dom'
import '../App.css';
export default class HomeCard extends React.Component {
    static contextType = DataContext;
    render(){
        const {products} = this.context;
  return (
    <div>
      <div className="card">
                { products.map((val,index)=>{
                   return(
                    <div className="card" key={val.id}>
                    <Card style={{ width: '14rem' …

这是 App.js 文件，其中将包含主页，其中有一个继续按钮。“继续”按钮将引导用户进入主页，但不幸的是，它不是将用户引导至主页，而是在“继续”按钮之后打开主页

function App() {
  return (  
     <div className="App"  > 
  <MainPage/>
  <Routes>
          <Route path="home" element={<Home />} />
          <Route path="discover" element={<Discover />} />
          <Route path="shop/skincare" element={<SkinCare />} />
          <Route path="shop/fragnance" element={<Fragnance />} />
          <Route path="shop/makeup" element={<Makeup />} />
          <Route path="shop/hair" element={<Hair />} />
          <Route path="details" element={<DetailsPage />} />
          <Route path="bucket" element={<Bucket />} />     
</Routes>
  </div>
  );
}

export default App;

它是 MainPage 组件，仅包含背景图像和 conitnue 按钮导出默认函数 MainPage() { return (

    <div>
       <div class="text-center" style={{padding:"22%"}}>
            <button type="button"  class="btn btn-secondary" style={{backgroundColor:"black"}}><Link to="home" style={{color:"white",textDecoration:"none"}}>Conitnue</Link></button> …

我在 next.js 应用程序中使用 use-sse （服务器端渲染挂钩），但收到错误“水合时出错。因为错误发生在 Suspense 边界之外，所以整个根将切换到客户端”渲染。” 该代码与链接https://github.com/kmoskwiak/useSSE类似。不幸的是，我无法预测 next.js 应用程序中的水合错误。这里面有什么问题吗？这是代码：

import { useSSE } from "use-sse";
import React from 'react';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export default function Todo() {
    const [todos, error] = useSSE(() : Promise<Todo[]>=> {
      
        return fetch("https://jsonplaceholder.typicode.com/todos").then(
          (response: Response) => response.json()
        );
       
      }, []);
      console.log(todos);
      if (error) return <div>{error.message}</div>;
    
      if (!todos?.length) return <span>Todo is Loading...</span>;
    
      return (
        <section>
          <h1>Todo List</h1>
          <ul>
            {todos.map((todo: Todo) => {
              return (
                <li key={todo.id}> …