在react路由器dom v6中使用Lazy加载传递道具

Question

我需要将props传递给惰性组件。

const A = React.lazy(() => import("./A"));
function App() {
return (
<Suspense fallback={<GlobalLoader />}>
<Routes>
<Route path="/s/:name" element={<ValidateName />} />
<Route path="/s" element={<Page fullsize={true}><A name='default'/></Page>} />
<Route path="*" element={<Navigate replace to='/s' />} />
</Routes>
</Suspense>
)
}
const Validatename = () => {
const {name} = useParams();
let allowedValues =[{'name':a, ... },{'name':b, ... },{'name':c, ... }]
let validValue = allowedValues.filter((i)=>i.name === name);
let isValid = (validValue > 0);
if(!isValid) return <Navigate replace to =='/s'>
return <Page fullSize={true}><A name={name}/></Page>
}

编辑：

1. 期望的结果：组件A的懒惰加载
2. 组件A初始化时使用"默认"值或URL中传递的值，即"名称">
3. 传递的值由ValidateName组件和默认路由决定

问题：如何在A中传递道具"name"，以便可以延迟加载

Answer 1

在这个外部上下文中是不可能的

相反，您可以使用useParams()来获取延迟加载组件A中的路径

如果您愿意，您可以在A周围创建一个包装器，并像下面这样调用useParams()，但基本上是一样的。

const AWrapper= () => {
const { path } = useParams();
if(path.id){
return <A prop={path.id} />
} else{
return <A props="default" />
}
};

PS:您应该将Route中的A更改为AWrapper