Reactjs React客户端尝试访问服务器资源，但未访问该资源。获取404

我相信我的react代码是在编译并发送到客户机后尝试访问服务器目录。这意味着当它查找gameLogic.js和style.css文件时，无法找到它们。我想知道我将如何着手获取我正在使用的react组件，以获取它们的副本并将它们发送到远程客户端。我得到以下错误

pages/game.js

import * as React from "react";
import Layout from "../components/Layout";
import Separator from "../components/Separator";
import CanvasCanvas from "../components/CanvasCanvas";

export default class extends React.Component {
    render() {

        return (
            <Layout>
                <main>
                    <div className="loginBox5">
                        <Separator height={50}/>
                        <div className="center">
                            <h1>Game Play:</h1>
                            <Separator height={50}/>
                            <div id="PlayAreaImg" className="gameContainer">
                                <CanvasCanvas id={"Memes"}/>
                            </div>
                        </div>
                        <Separator height={350}/>
                    </div>
                </main>
            </Layout>
        )
    }
}

---

感谢您提前提供的帮助。

如果您想在编译后访问这些文件，请将它们放入

static

文件夹中，例如

script.src=“/static/gameLogic.js”

或者使用动态导入

import dynamic from 'next/dynamic'
const gameLogic = dynamic(() => import(`../src/gameLogic.js`))

---

谢谢，我正在寻找一种方法，将它们打包并与页面一起发送到远程客户端

import * as React from "react";

export default class extends React.Component {

    render() {
        return (
            <canvas ref={"canvas"} id = {"canvas"} width={640} height={425}/>
        )
    }


    async componentDidMount() {
        const script = document.createElement("script");
        console.log("ln14")
        script.src = "../src/gameLogic.js";
        script.async = true;
        // console.log(script);
        document.head.appendChild(script);
        console.log(script);

        await this.setState(
            {
                text: this.props.text,
                ...this.state
            }
        );
        await this.forceUpdate();
        const canvas = this.refs.canvas;
        const ctx = canvas.getContext("2d");
        ctx.fillText((this.state && this.state.text) ? this.state.text : "Not initialised (nullcheck)", 210, 75);
    }
}

http://localhost:3000/css/style.css net::ERR_ABORTED 404 (Not Found)

index.js:1 Warning: Extra attributes from the server: deluminate_imagetype

GET http://localhost:3000/src/gameLogic.js net::ERR_ABORTED 404 (Not Found)

import dynamic from 'next/dynamic'
const gameLogic = dynamic(() => import(`../src/gameLogic.js`))