Javascript 组件未被渲染-动态路由反应

我可以在路由到玩家组件时获取玩家的数据， 但是当我点击链接标签时，PlayerContainer组件没有打开。 这是我的App.js文件

import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Players from './Components/Players'
import PlayersContainer from './Components/Container/playersContainer'
import Navigation from './Components/Navigation';
export default class App extends Component {

    state = {

      players:[

        {
          id:1,
          name:'Ronaldo'
        },
        {
          id:2,
          name:'Messi'
        }

      ]
}


  render() {
    return (
      <Router>
          <Navigation />
          <Switch>
          <Route  path="/players" render={(props) => <Players {...props}  players={this.state.players} />} />
          <Route exact path="/players/:id" render={PlayersContainer} />
          </Switch>
    </Router>
    )
  }
}

import React，{Component}来自“React”
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}
从“./Components/Player”导入播放机
从“./Components/Container/PlayersContainer”导入PlayersContainer
从“./Components/Navigation”导入导航；
导出默认类应用程序扩展组件{
状态={
玩家：[
{
id:1，
姓名：“罗纳尔多”
},
{
id:2，
姓名：“梅西”
}
]
}
render（）{
返回(
} />
)
}
}

这是我的播放器组件

import React from 'react'
import { Link } from 'react-router-dom'
export default function Players(props) {

    const renderPlayers = () => {

        let players = props.players.map(playerObj => <li> <Link to={`/players/${playerObj.id}`}> Player {playerObj.name} </Link></li>)
        return players
    }
    return (
        <div>
            <ul>
            {renderPlayers()}
            </ul>
        </div>
    )
}

从“React”导入React
从“react router dom”导入{Link}
导出默认功能玩家（道具）{
常量渲染层=（）=>{
让players=props.players.map（playerObj=>
Player{playerObj.name}
）
返回球员
}
返回(

{renderPlayers（）}

)
}

这是我的PlayerContainer组件，我想在其中渲染播放器的各个数据

import React from 'react'
import { Link } from 'react-router-dom'
export default function PlayersContainer(props) {


    const renderPlayers = () => {

        console.log(props);
    }
    return (
        <div>
            <ul>
            {renderPlayers()}
            </ul>
        </div>
    )

}

从“React”导入React
从“react router dom”导入{Link}
导出默认函数PlayersContainer（道具）{
常量渲染层=（）=>{
控制台日志（道具）；
}
返回(

{renderPlayers（）}

)
}

您的

路线错误

标记为

精确

。按照目前的编写方式，任何以

/players

开头的内容都将与第一条路线匹配。由于它位于开关中，因此仅渲染第一个匹配项

更改为：

}/>

为此：

}/>

---

现在只有准确的

/players

将匹配第一条路线，并且

/players/id

可以继续通过它来匹配第二条路线。

是的，它现在工作了。。但是如果我对这两条路线都严格要求呢？？即使这样也行。}/>如果没有参考文档或尝试，我不记得它将如何处理带有动态路径的确切路线。但是你可以尝试一下，如果我对这两条路线都给予“严格的要求”，那么它是有效的。不知道这是否是正确的做法，但我想这是严格的检查路线，由于这一点，我现在得到一个console.log。我可以在PlayerContainer中获取所需的参数，这解决了问题。无论如何谢谢你，布莱恩。今天你又给我留了一杯咖啡：）