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

by

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