我有一组对象，我想用它们来渲染一些模板化页面。我尝试通过数组进行映射并为每个对象返回一个路由：
const Component = () => (
<div className={`${styles["body"]}`}>
{heroesArray.map((hero, i) => {
let randomQuote = getRandomQuote(hero.quotes);
let path = hero.name
.toLowerCase()
.split(" ")
.join("_");
return (
<div className="thumbnail">
<Thumbnail
key={i}
hero={hero}
randomQuote={randomQuote}
path={path}
/>
<Route <!-- HERE I CREATE A ROUTE -->
path={path}
component={() => <HeroPage hero={hero} />}
key={i + 365}
/>
</div>
);
})}
</div>
);
缩略图包含在一个链接标签中，该标签通向作为道具传递的路径。当我尝试单击其中一个缩略图时，没有渲染任何内容。
完整代码和工作应用程序在这里：https : //repl.it/repls/NoteworthyDetailedForm
我究竟做错了什么？
编辑：
我在这里工作：https : //repl.it/@wichopy/NoteworthyDetailedForm
我做了几件事。
路径应以正斜杠 ('/') 开头。我在 Main 组件中定义了所有路由，并将其放在一个 Switch 中，该 Switch 一次只能渲染一条路由。
原文：Route 中的组件 prop 应该只是未实例化的组件，React 路由器将处理渲染它并将 props 传递给它。
如果你想控制按下什么道具，使用渲染而不是组件：
<Route <!-- HERE I CREATE A ROUTE -->
path={path}
render={(props) => <HeroPage hero={hero} {...props}/>}
key={i + 365}
/>
如果您打算只使用一个组件：
<Route <!-- HERE I CREATE A ROUTE -->
path={path}
component={HeroPage}
key={i + 365}
/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句