我想根据路线动态加载组件。我正在尝试制作一个页面,该页面可以加载任何单个组件以进行测试。
但是,每当我尝试执行import(path)
时,它都会显示加载程序,但从未真正加载。如果我对path
包含的字符串进行完全相同的硬编码,那么它可以正常工作。是什么赋予了?如何获得nextjs实际动态导入动态导入?
// pages/test/[...component].js
const Test = () => {
const router = useRouter();
const { component } = router.query;
const path = `../../components/${component.join('/')}`;
console.log(path === '../../components/common/CircularLoader'); // prints true
// This fails to load, despite path being identical to hard coded import
const DynamicComponent = dynamic(() => import(path), {
ssr: false,
loading: () => <p>Loading...</p>,
});
// This seems to work
const DynamicExample = dynamic(() => import('../../components/Example'), {
ssr: false,
loading: () => <p>Loading...</p>,
});
return (
<Fragment>
<h1>Testing {path}</h1>
<div id="dynamic-component">
<DynamicComponent /> <!-- this always shows "Loading..." -->
<DynamicExample /> <!-- this loads fine. -->
</div>
</Fragment>
);
};
export default Test;
最佳答案
我将dynamic
放在组件之外,并且工作正常。
const getDynamicComponent = (c) => dynamic(() => import(`../components/${c}`), {
ssr: false,
loading: () => <p>Loading...</p>,
});
const Test = () => {
const router = useRouter();
const { component } = router.query;
const DynamicComponent = getDynamicComponent(component);
return <DynamicComponent />
}
关于next.js - 动态导入未知组件-NextJs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62942727/