組件沒有被渲染 - 動態路由反應

Question

當我路由到播放器組件時，我可以獲得播放器的數據，但是當我單擊鏈接標簽時，播放器容器組件沒有打開。 這是我的 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 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>
    )
}

這是我的 PlayersContainer 組件，我想在其中呈現 Player 的各個數據。

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>
    )

}

Answer 1

您將錯誤的Route標記為exact 。 按照目前的編寫方式，以/players開頭的任何內容都將匹配第一條路線。 由於它在開關中，因此只會渲染第一個匹配項。

將其更改為：

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

對此：

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

現在只有/players會匹配第一個路由，而/players/id可以繼續通過它匹配第二個路由。