React 动态require请求本地资源

Question

问题遇到的现象和发生背景

框架：React+Flask

我有两个页面：A页面传递一个参数（音频文件名）给B页面，B页面将拿到的这个参数拼接成路径，并通过video-react组件渲染。现在的问题是require不接受变量，并报
Error: Cannot find module '../../replay_data/replay_2022-03-09_18_24_23.mp4'的错误。

问题相关代码，请勿粘贴截图

B页面取得A页面传参：

constructor(props) {
        super(props);
        this.state = {
            collapsed: true,
            replay_filename : '',
            filepath : "../../replay_data/" + props.location.state.filename,
            filename : props.location.state.filename
        };
}

渲染video-react组件：

<Player
                        ref  ={c => {
                            this.player = c;
                        }}
                        poster="https://video-react.js.org/assets/poster.png"
                    >
                        <source
                            src={require( this.state.filepath ).default}
                            type="video/mp4"
                        />
                        <ControlBar autoHide={false} disableDefaultControls={false}>
                            <ReplayControl seconds={10} order={1.1} />
                            <ForwardControl seconds={30} order={1.2} />
                            <PlayToggle />
                            <CurrentTimeDisplay order={4.1} />
                            <TimeDivider order={4.2} />
                            <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
                            <VolumeMenuButton />
                        </ControlBar>
</Player>

Answer 1

智利队src就可以了啊，不用require吧