Props.match.params.id undefined but in console, how can I use it in useEffect hook function. I'm using hashRouter

I’ve tried some options I found, like useParams() or other tricks but it’s not working. I think I’m missing something Fundamental. Here is my code

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById("root")
);
function App(){
return(
...
<Switch>
          <Route exact path={["/", "/movies"]} component={MoviesList} />
          <Route exact path="/add" component={AddMovie} />
          <Route path="/movies/:id" component={Movie} />
</Switch>
);
}

Here is my component to use id

export default function Movie(props) {
...
    useEffect(() => {
            getMovie(props.match.params.id);
        }, [props.match.params.id]);
};

I try inside function Movie useParams() and other things. But doesn’t work. When I console.log(props.match.params.id) it appears perfect and in the url also.

11 thoughts on “Props.match.params.id undefined but in console, how can I use it in useEffect hook function. I'm using hashRouter”

  1. Here is an example , check the player component from this link https://codesandbox.io/s/jzn9rnm6ov?file=/components/Player.js:0-656

    The part you need

    parseInt(props.match.params.number, 10)
    

    The Full component

    import React from 'react'
    import PlayerAPI from '../api'
    import { Link } from 'react-router-dom'
    
    // The Player looks up the player using the number parsed from
    // the URL's pathname. If no player is found with the given
    // number, then a "player not found" message is displayed.
    const Player = (props) => {
      const player = PlayerAPI.get(
        parseInt(props.match.params.number, 10)
      )
      if (!player) {
        return <div>Sorry, but the player was not found</div>
      }
      return (
        <div>
          <h1>{player.name} (#{player.number})</h1>
          <h2>Position: {player.position}</h2>
          <Link to='/roster'>Back</Link>
        </div>
      )
    }
    
    export default Player
    
    Reply

Leave a Comment