CODEWITHSUNDEEP
javascriptreactjsreact-router
codemt
codemt

Reputation: 481

Component is not Getting Rendered - Dynamic Routing React

I can get the data of the players when i Route to the Players Component, but when i click on the Link Tags, the PLayersContainer Component is not opening. This is my App.js File. 

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

This is my Players Component.

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

This is my PlayersContainer Component, where i want to render the individual data of the 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>
    )

}

Upvotes: 0

Views: 43

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14375

You have the wrong Route marked as exact. The way its written currently, anything beginning with /players will match the first route. Since its in a switch, only the first match will be rendered.

Change it from:

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

to this:

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

Now only exactly /players will match the first route, and /players/id can continue past it to match the second.

Upvotes: 1

Related Questions