如果路径相同，但参数不同，React-Router 不会接收道具？

Question

I have a path /player/:id/

If I navigate from say /player/12 to /player/13 it will error out, for example: cannot find foo of undefined . However if I navigate from a different path such as /heroes/100 to /player/12 it will load fine.

My suspicion is that when I link from the same route, but different param, the new page is not invoking my useEffect or setState hooks.

I feel like I'm missing something fundamental here, but I can't figure it out. If my suspicion is correct, does anyone know how i can force my component to use my UseEffect and UseState hooks before loading the page when going from the same route, but different params?

The params are correct, it's displaying the correct id in the url bar. If i refresh the page it'll load fine, but if i click the link it'll error out Cannot read property 'hero_id' of undefined

Thank you

Context:

playedAgainst.map(player => <Link key={Math.random()} to=
{"/players/" + props.invertedPlayers[player]}> <span> {player} </span></Link>

Each iteration creates a new Player name, with a Link. When i click on that link it says all "cannot read property hero_id of undefined". However, when i refresh the page it loads fine. I'm 100% sure the link path is correct. I used the exact same code in a different component that leads to the Player component.

(The Math.random is definitely sloppy, i'll remove that!)

        <Header />
        <Switch>
          <Route exact path="/">
            <Search players={this.state.players} />
            <GameList players={this.state.players} data={this.state.games} />
            <Footer />
          </Route>
          <Route exact path="/players/:id">
            <Player players={this.state.players} invertedPlayers = {_.invert(this.state.players)} />
          </Route>
          <Route exact path="/heroes/:id">
            <Heroes players={this.state.players} invertedPlayers = {_.invert(this.state.players)} />
          </Route>
        </Switch>
        </Router>

EDIT -

I added the following hook to my Players component.

  useEffect(() => {
    console.log('useEffect fired');
}, [])

When i go from 1 id to another (same route, different param) the useEffect hook is not firing.

Seems like i need to get my useEffect to fire when following the same routes with different ids.

Accessing my Params via useParams():

let { id } = useParams();
  const [player, setPlayerData] = useState({ data: null, image: null });
  useEffect(() => {
    const fetchData = async () => {
      const response1 = await axios(`/api/players/${id}`);
      const response2 = await axios(`/api/saveImage/${id}`)
      setPlayerData({ data: response1.data, image: response2.data });
    };
    fetchData();
  }, []);

EDIT 2 -

Added to ID to useEffect, but useEffect is still not rerunning for some reason:

let { id } = useParams();
  const [player, setPlayerData] = useState({ data: null, image: null });
  useEffect(() => {
    const fetchData = async () => {
      const response1 = await axios(`/api/players/${id}`);
      const response2 = await axios(`/api/saveImage/${id}`)
      setPlayerData({ data: response1.data, image: response2.data });
    };
    fetchData();
  }, [id]);

EDIT 3 -

More context, hopefully this helps:

As soon as the component loads it pulls data from the API to load within the component. This works fine. When i click a ling to the same route, but different param, the useEffect hook to pull data doesn't run.

const Player = (props) => {
  let { id } = useParams();
  const [player, setPlayerData] = useState({ data: null, image: null });
  useEffect(() => {
    const fetchData = async () => {
      const response1 = await axios(`/api/players/${id}`);
      const response2 = await axios(`/api/saveImage/${id}`)
      setPlayerData({ data: response1.data, image: response2.data });
    };
    fetchData();
  }, [id]);

  useEffect(() => {
    console.log('count changed');
}, [])

  console.log('test')
    return (
        <div className="historyContainer">
...............

{player.data && player.data.map((game, i) => {
    const heroIdOfPlayer = game.players.find(p => p.account_id === +id).hero_id; 
    const teamOfPro = game.players.find(p => p.hero_id === +heroIdOfPlayer).team;

The part under the '.......' is where Cannot read property 'hero_id' of undefined is coming from, which only happens when clicking through the link.

A few lines further down:

{playedAgainst ?
            playedAgainst.map(player => <Link key={Math.random()} to={"/players/" + props.invertedPlayers[player]}><span> {player} </span></Link>)
            : ""}

This is how each link is generated. The path is correct. if i follow the path it'll say Cannot read property 'hero_id' of undefined , but when i refresh the page it will load fine.

EDIT - 4

Adding my App component in case this helps:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      games: [],
      players: {},
    };
  }



  componentDidMount() {
    ReactGA.pageview(window.location.pathname)
    this.loadGames();
    this.loadPlayers();
    this.interval = setInterval(() => {
      this.loadGames();
    }, 5000);

  }

  componentWillUnmount() {
    this.loadGames();
    clearInterval(this.interval);
  }

  async loadGames() {
    const response = await fetch('/api/games');
    const myJson = await response.json();
    const sortedJson = myJson.sort((a, b) =>
      a.spectators > b.spectators ? -1 : 1,
    );
    this.setState({ games: sortedJson });
  }

  async loadPlayers() {
    const response = await fetch('/api/playersList');
    const myJson = await response.json();
    this.setState({ players: myJson });
  }

  render() {
    return (
      <Router history={history}>
        <Header />
        <Switch>
          <Route exact path="/">
            <Search players={this.state.players} />
            <GameList players={this.state.players} data={this.state.games} />
            <Footer />
          </Route>
          <Route exact path="/players/:id">
            <Player players={this.state.players} invertedPlayers = {_.invert(this.state.players)} />
          </Route>
          <Route exact path="/heroes/:id">
            <Heroes players={this.state.players} invertedPlayers = {_.invert(this.state.players)} />
          </Route>
        </Switch>
        </Router>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

In your useEffect hook, pass the prop that changes as a dependency ie

useEffect(..., [id])

This will ensure useEffect runs everytime id changes, the problem at the minute is you pass [] which means useEffect will only run once, when the component is first mounted.