Component is not Getting Rendered - Dynamic Routing React

Question

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

}

Brian Thompson · Accepted Answer · 2020-05-21 18:59:37Z

1

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.

answered May 21, 2020 at 18:59

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

codemt Over a year ago

yes its working now.. but what if i give exact strict to both the Routes?? even that is working. <Route exact strict path="/players" render={(props) => <Players {...props} players={this.state.players} />} /> <Route exact strict path="/players/:id" render={PlayersContainer} />

Brian Thompson Over a year ago

Without referencing the docs or trying it out, I don't remember how it would handle an exact route with a dynamic path. But you can try it

codemt Over a year ago

if i give "exact strict" to both of the routes , it is working. dont know if that is the right practice, but i guess it is stricting checking the route due to that, and i am getting a console.log now. i can fetch the Params which i want in the PlayersContainer, which solved the problem. Thank you anyways Brain. You saved me another cup of coffee for today :)

Collectives™ on Stack Overflow

Component is not Getting Rendered - Dynamic Routing React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related