为阵列的每个元素反应路由器唯一路径

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为阵列的每个元素反应路由器唯一路径相关的知识,希望对你有一定的参考价值。

我有一系列元素,如:

const arr = [

 0: {name: aaaa, age:33, color: red}
 1: {name: bbbb, age:22, color: blue}
 2: {name: cccc, age:55, color: yellow}

]

当我写一个像http://localhost/aaaa这样的路径时,我会这样做,它会渲染一个数组的实际元素,我想在反应路由器上定义它。

有什么建议?

答案

您可以使用具有name参数的单个路径来处理此问题:

<Route path="/:name" component={MyComponent} />
...
componentDidMount() {
    const arr = [
        {name: aaaa, age:33, color: red},
        {name: bbbb, age:22, color: blue},
        {name: cccc, age:55, color: yellow}
    ];
    const match = arr.find( item => item.name === this.props.match.params.name );
    // Render match
}
另一答案

在父元素上看起来像这样

<PropsRoute exact path ='/:name'component = {PlanetInfo} onePlanet = {singlePlanet} planetList = {planet />

和儿童组成部分

class PlanetInfo扩展了React.Component {componentDidMount(){

    const match = this.props.onePlanet.find( item => item.name === this.props.match.params.name );
}
backToPlanetList = () => {
    this.props.history.push('/')
}
render(){
    console.log(match)//here is undefined
    const {onePlanet} = this.props;
    return (
        <div>
            <button onClick={this.backToPlanetList}>Back to the list</button>
            <h1>name: {onePlanet.name}</h1>
            <p>climate: {onePlanet.climate}</p>
            <p>diameter: {onePlanet.diameter}</p>
            <p>rotation period: {onePlanet.rotation_period}</p>
        </div>
    )
}

}

以上是关于为阵列的每个元素反应路由器唯一路径的主要内容,如果未能解决你的问题,请参考以下文章

如何优化C ++代码的以下片段 - 卷中的零交叉

vue路由对象($route)参数简介

反应路由器和快递冲突

反应路由器:无法读取未定义的属性“路径名”

我对反应路由器的相对路径有困难。基本路径从位置栏中消失

反应路由器“#在路由内部签名”