Props not passing in dynamic URL - TypeError React.js

Question

I am trying to pass props to a component, Location, using React router as a url parameter, however I am getting a type error because props.match.params.location is undefined. I am passing the location in the url Link of the Locations component and when I click on this link in the browser, it redirects to the correct url with the correct parameter:

http://localhost:3000/locations/tokyo

However this is triggering this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'params')
at Location (Location.js:10:1)

App.js:

class App extends React.Component {

render() {
    return (
        <div className="App">
            <AppNavbar />
            <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/stock-levels" element={<StockLevels />} />
                <Route path="/locations" element={<Locations />} />
                <Route path="/locations/:location" element={<Location />} />
            </Routes>
        </div>
    )
}

}

export default App;

Locations.js:

import {Link} from "react-router-dom";

function Locations() {

const locations = ["tokyo", "location2", "location3", "location4", "location5", "location6", "location7", "location8"]

const locationList = locations.map(location => {
    return <div className="location-container">
        <Card className="location-card">

            <CardTitle><Link to={`/locations/${location}`}>{location}</Link></CardTitle>
        </Card>
    </div>
})

return (
    <>
      <h1>Locations</h1>

        {locationList}

    </>
)

}

export default Locations

Location.js:

function Location(props) {

//Make location equal to the location passed via route
const location = props.match.params.location

return (
    <>
        <h1>Location</h1>
        <h2>{location}</h2>
    </>
)

}

export default Location

As far as I can tell, with how the routes are configured and the link url:

<Link to={`/locations/${location}`}>

This should be passed as props.

Thanks for any help!

Answer 1

The question is a bit confising in this format, could you plase share your issue in an online sandbox?

https://codesandbox.io/ - is a goood one.

Answer 2

In react-router-dom v6 there are no longer any route props, i.e. history, location, and match, instead they are replaced by React hooks. props.match is undefined and throws an error when trying to then access props.match.params.

• history object replaced by a navigate function via useNavigation
• location object via useLocation
• match via a useMatch hook, but params object via useParams was added in v6

The useParams hook is what you want to access the location route param.

import { useParams } from 'react-router-dom';

...

function Location() {
  const { location } = useParams();

  return (
    <>
      <h1>Location</h1>
      <h2>{location}</h2>
    </>
  );
}

Answer 3

I think you need to use useParams to get access to the params.

    <Routes>
        <Route path="/locations/:location" element={<Location />} />
    </Routes>


import React from "react"
import { useParams } from "react-router-dom"

export default function Location() {
    const { location } = useParams()
    
return (
    <>
        <h1>Location</h1>
        <h2>{location}</h2>
   </>
    )
        }

Forgive the spacing.